fix(remission-data-access, remission-list, remission-add-item-flow): enforce mandatory list type for add-item flow

Remove addToDepartmentList method and ensure items added via search dialog
are always processed as mandatory remission items (ReturnItem) instead of
department suggestions (ReturnSuggestion). This prevents items from being
incorrectly added to department overflow lists when remission is already
started, maintaining data consistency in the WBS system.

Changes:
- Remove addToDepartmentList method from RemissionSearchService
- Update remitItems to use mandatory list type for add-item flow
- Simplify addToRemiList to only use mandatory remission endpoint
- Add addItemFlow parameter to control remission list type behavior

Refs: #4768, #5273, #5280

.browserslistrc

@@ -2,6 +2,3 @@ last 1 Chrome version
 last 1 Firefox version
 last 2 Edge major versions
 last 2 iOS major versions
-safari > 11
-Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.editorconfig

@@ -7,6 +7,7 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+end_of_line = crlf
 
 [*.md]
 max_line_length = off

.github/commit-instructions.md

@@ -1,36 +1,86 @@
-# Commit Message Instructions
+# Commit Message Instructions (Conventional Commits)
+
+Commit messages should follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). This provides a standardized format for commit messages, making it easier to understand changes, automate changelog generation, and trigger build/publish processes.
 
 ## Format
 
-Each commit message should follow this structure:
-
-1. **Short Summary**: A brief summary of the changes (max 72 characters).
-2. **List of Changes**: A detailed list of changes with icons to indicate the type of change.
-
----
-
-### Example
+The commit message structure is as follows:
 
 ```
-Added a new module to handle user authentication, including login and registration.
+<type>[optional scope]: <description>
 
-- ✨ **Feature**: Implemented user login functionality
-- 🐛 **Fix**: Resolved session timeout issue
-- 🛠️ **Refactor**: Improved error handling in auth service
-- 🧪 **Test**: Added unit tests for login component
+[optional body]
+
+[optional footer(s)]
 ```
 
 ---
 
-## Icons for Change Types
+### Components
 
-- ✨ **Feature**: New features or functionality
-- 🐛 **Fix**: Bug fixes
-- 🛠️ **Refactor**: Code improvements without changing functionality
-- 🧪 **Test**: Adding or updating tests
-- 📚 **Docs**: Documentation updates
-- 🗑️ **Chore**: Maintenance tasks (e.g., dependency updates)
-- 🚀 **Performance**: Performance improvements
-- 🎨 **Style**: Code style changes (e.g., formatting)
-- 🔒 **Security**: Security-related changes
-- ⚙️ **Config**: Configuration changes
+1.  **Type**: Indicates the kind of change introduced by the commit. Must be one of the allowed types (see below).
+2.  **Scope (Optional)**: A noun describing the section of the codebase affected by the change (e.g., `auth`, `ui`, `build`). Enclosed in parentheses.
+3.  **Description**: A concise summary of the change in the imperative, present tense (e.g., "add login feature", not "added login feature" or "adds login feature"). Starts with a lowercase letter and should not end with a period. Max 72 characters recommended for the entire header line (`<type>[optional scope]: <description>`).
+4.  **Body (Optional)**: A more detailed explanation of the changes. Use the imperative, present tense. Explain the _what_ and _why_ vs. _how_. Separate from the description by a blank line. Wrap lines at 72 characters.
+5.  **Footer(s) (Optional)**: Contains additional metadata. Common footers include:
+    - `BREAKING CHANGE:` followed by a description of the breaking change. A `!` can also be appended to the type/scope (`feat!:`) to indicate a breaking change.
+    - Issue references (e.g., `Refs: #123`, `Closes: #456`). Separate from the body by a blank line.
+
+---
+
+### Allowed Types
+
+- **feat**: A new feature for the user.
+- **fix**: A bug fix for the user.
+- **build**: Changes that affect the build system or external dependencies (e.g., gulp, broccoli, npm).
+- **chore**: Other changes that don't modify src or test files (e.g., updating dependencies, build tasks).
+- **ci**: Changes to CI configuration files and scripts (e.g., Travis, Circle, BrowserStack, SauceLabs).
+- **docs**: Documentation only changes.
+- **perf**: A code change that improves performance.
+- **refactor**: A code change that neither fixes a bug nor adds a feature.
+- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
+- **test**: Adding missing tests or correcting existing tests.
+
+---
+
+### Examples
+
+**Commit with description only:**
+
+```
+fix: correct minor typos in code
+```
+
+**Commit with scope:**
+
+```
+feat(lang): add polish language
+```
+
+**Commit with body and breaking change footer:**
+
+```
+refactor: drop support for Node 6
+
+The new implementation relies on async/await and other features
+introduced in Node 8+.
+
+BREAKING CHANGE: refactor to use JavaScript features not available in Node 6.
+```
+
+**Commit with scope, body, and issue footer:**
+
+```
+docs(readme): improve installation instructions
+
+Provide clearer steps for setting up the development environment.
+Add links to prerequisite tools.
+
+Closes: #12
+```
+
+**Commit with `!` for breaking change:**
+
+```
+feat(api)!: send an email to the customer when a product is shipped
+```

.github/copilot-instructions.md

@@ -1,17 +1,23 @@
-# Spark Instructions
+# Mentor Instructions
 
 ## Introduction
 
-You are Spark, a mentor designed to help me with coding, preview my work, and assist me in improving by pointing out areas for enhancement.
+You are Mentor, an AI assistant focused on ensuring code quality, strict adherence to best practices, and development efficiency. **Your core function is to enforce the coding standards and guidelines established in this workspace.** Your goal is to help me produce professional, maintainable, and high-performing code.
+
+**Always get the latest official documentation for Angular, Nx, or any related technology before implementing or when answering questions or providing feedback. Use Context7:**
 
 ## Tone and Personality
 
-You are a mentor with a dual approach: when I make a mistake or my work needs improvement, you adopt a strict and technical tone to clearly explain what’s wrong and how to fix it. In all other cases, you are casual and friendly, like a supportive coding buddy, keeping the vibe light and encouraging.
+Maintain a professional, objective, and direct tone consistently:
+
+- **Guideline Enforcement & Error Correction:** When code deviates from guidelines or contains errors, provide precise, technical feedback. Clearly state the issue, cite the relevant guideline or principle, and explain the required correction for optimal, maintainable results.
+- **Technical Consultation:** In discussions about architecture, best practices, or complex coding inquiries, remain formal and analytical. Provide clear, well-reasoned explanations and recommendations grounded in industry standards and the project's specific guidelines.
 
 ## Behavioral Guidelines
 
-- Focus on constructive feedback; avoid simply rewriting my code unless I ask for it.
-- If my question or code is unclear, ask me for clarification or more details.
-- Do not discourage me; always frame suggestions as opportunities for growth.
-- Avoid giving generic answers—tailor your advice to my specific code or problem.
-- Keep my preferences in mind: prioritize Type safety, follow Clean Code principles and emphasize good documentation.
+- **Actionable Feedback:** Prioritize constructive, actionable feedback aimed at improving code quality, maintainability, and adherence to standards. Avoid rewriting code; focus on explaining the necessary changes and their rationale based on guidelines.
+- **Strict Guideline Adherence:** Base _all_ feedback, suggestions, and explanations rigorously on the guidelines documented within this workspace. Cite specific rules and principles consistently.
+- **Demand Clarity:** If a query or code snippet lacks sufficient detail for a thorough, professional analysis, request clarification.
+- **Professional Framing:** Frame all feedback objectively, focusing on the technical aspects and the importance of meeting project standards for long-term success.
+- **Context-Specific Expertise:** Provide specific, context-aware advice tailored to the code or problem, always within the framework of our established guidelines.
+- **Enforce Standards:** Actively enforce project preferences for Type safety, Clean Code principles, and thorough documentation, as mandated by the workspace guidelines.

.github/review-instructions.md

@@ -36,8 +36,9 @@ When conducting a code review, follow these steps to ensure a thorough and const
 
 ## Additional Informations
 
-- Treat missing tests and JSDocs as warnings
-- Tread missing unit test as warnings
+- Missing tests and JSDocs are minor issues
+- Missing unit test are minor issues
+- Missing End-to-End (E2E) Testing Attributes (`data-what`, `data-which`) are warnings
 
 ### Review Template
 

.github/testing-instructions.md

@@ -1,10 +1,14 @@
 # Testing Instructions
 
 ## Framework and Tools
-- Use **Jest** as the testing framework.
-- For unit tests, utilize **Spectator** to simplify Angular component testing.
+
+- **Vitest** is the recommended testing framework.  
+  [Vitest Documentation (latest)](https://context7.com/vitest-dev/vitest/llms.txt?topic=getting+started)
+- **Jest** and **Spectator** are **deprecated**.  
+  Do not use them for new tests. Existing tests should be migrated to Vitest where possible.
 
 ## Guidelines
+
 1. **Error Case Testing**: Ensure all edge cases and error scenarios are thoroughly tested.
 2. **Arrange-Act-Assert Pattern**: Follow the Arrange-Act-Assert pattern for structuring your tests:
    - **Arrange**: Set up the testing environment and initialize required variables.
@@ -12,35 +16,40 @@
    - **Assert**: Verify the expected outcomes.
 
 ## Best Practices
+
 - Write clear and descriptive test names.
 - Ensure tests are isolated and do not depend on each other.
 - Mock external dependencies to avoid side effects.
 - Aim for high code coverage without compromising test quality.
 
 ## Example Test Structure
+
 ```typescript
-// Example using Jest and Spectator
-import { createComponentFactory, Spectator } from '@ngneat/spectator';
+// Example using Vitest (Jest and Spectator are deprecated)
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/angular';
 import { MyComponent } from './my-component.component';
 
 describe('MyComponent', () => {
-  let spectator: Spectator<MyComponent>;
-  const createComponent = createComponentFactory(MyComponent);
+  let component: MyComponent;
 
-  beforeEach(() => {
-    spectator = createComponent();
+  beforeEach(async () => {
+    const { fixture } = await render(MyComponent);
+    component = fixture.componentInstance;
   });
 
-  it('should display the correct title', () => {
+  it('should display the correct title', async () => {
     // Arrange
     const expectedTitle = 'Hello World';
 
     // Act
-    spectator.component.title = expectedTitle;
-    spectator.detectChanges();
+    component.title = expectedTitle;
+    // If using Angular, trigger change detection:
+    // fixture.detectChanges();
 
     // Assert
-    expect(spectator.query('h1')).toHaveText(expectedTitle);
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toBe(expectedTitle);
   });
 
   it('should handle error cases gracefully', () => {
@@ -48,14 +57,17 @@ describe('MyComponent', () => {
     const invalidInput = null;
 
     // Act
-    spectator.component.input = invalidInput;
+    component.input = invalidInput;
 
     // Assert
-    expect(() => spectator.component.processInput()).toThrowError('Invalid input');
+    expect(() => component.processInput()).toThrowError('Invalid input');
   });
 });
 ```
 
 ## Additional Resources
-- [Jest Documentation](https://jestjs.io/docs/getting-started)
-- [Spectator Documentation](https://ngneat.github.io/spectator/)
+
+- [Vitest Documentation (latest)](https://context7.com/vitest-dev/vitest/llms.txt?topic=getting+started)
+- [Vitest Official Guide](https://vitest.dev/guide/)
+- [Testing Library for Angular](https://testing-library.com/docs/angular-testing-library/intro/)
+- **Jest** and **Spectator** documentation are deprecated

.gitignore

@@ -1,63 +1,77 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-.matomo
-
-# compiled output
-/dist
-/tmp
-/out-tsc
-
-/
-
-# dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-.prettierrc
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# misc
-/.angular/cache
-/.sass-cache
-/connect.lock
-/coverage
-/testresults
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-yarn.lock
-testem.log
-/typings
-
-# System Files
-.DS_Store
-Thumbs.db
-
-libs/swagger/src/lib/*
-*storybook.log
-
-
-.nx/cache
-.nx/workspace-data
-.angular
-
-
-storybook-static
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+.matomo
+junit.xml
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+/
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/testresults
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+yarn.lock
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+libs/swagger/src/lib/*
+*storybook.log
+
+
+.nx/cache
+.nx/workspace-data
+.angular
+.claude
+
+
+storybook-static
+
+.cursor\rules\nx-rules.mdc
+.github\instructions\nx.instructions.md
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
+
+vite.config.*.timestamp*
+vitest.config.*.timestamp*
+
+.mcp.json
+.memory.json
+
+nx.instructions.md

.husky/pre-push

@@ -1 +0,0 @@
-npm run ci

.lintstagedrc.json

@@ -1,7 +1,7 @@
-{
-  "*.ts": "npx eslint --fix --config eslint.config.mjs",
-  "*.tsx": "npx eslint --fix --config eslint.config.mjs",
-  "*.js": "npx eslint --fix --config eslint.config.mjs",
-  "*.jsx": "npx eslint --fix --config eslint.config.mjs",
-  "*.html": "npx eslint --fix --config eslint.config.mjs"
-}
+{
+  "*.ts": "npx eslint --fix --config eslint.config.js",
+  "*.tsx": "npx eslint --fix --config eslint.config.js",
+  "*.js": "npx eslint --fix --config eslint.config.js",
+  "*.jsx": "npx eslint --fix --config eslint.config.js",
+  "*.html": "npx eslint --fix --config eslint.config.js"
+}

.prettierrc

@@ -0,0 +1,37 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "endOfLine": "auto",
+  "arrowParens": "always",
+  "quoteProps": "consistent",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html"
+      }
+    },
+    {
+      "files": "*.component.html",
+      "options": {
+        "parser": "angular"
+      }
+    },
+    {
+      "files": "*.scss",
+      "options": {
+        "singleQuote": false
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "printWidth": 80
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "angular.ng-template",
     "nrwl.angular-console",
     "dbaeumer.vscode-eslint",
-    "firsttris.vscode-jest-runner"
+    "firsttris.vscode-jest-runner",
+    "editorconfig.editorconfig"
   ]
 }

.vscode/settings.json

@@ -19,7 +19,10 @@
   "exportall.config.folderListener": [
     "/libs/oms/data-access/src/lib/models",
     "/libs/oms/data-access/src/lib/schemas",
-    "/libs/catalogue/data-access/src/lib/models"
+    "/libs/catalogue/data-access/src/lib/models",
+    "/libs/common/data-access/src/lib/models",
+    "/libs/common/data-access/src/lib/error",
+    "/libs/oms/data-access/src/lib/errors/return-process"
   ],
   "github.copilot.chat.commitMessageGeneration.instructions": [
     {
@@ -28,13 +31,7 @@
   ],
   "github.copilot.chat.codeGeneration.instructions": [
     {
-      "file": ".github/copilot-instructions.md"
-    },
-    {
-      "file": ".github/review-instructions.md"
-    },
-    {
-      "file": ".github/testing-instructions.md"
+      "file": ".vscode/llms/angular.txt"
     },
     {
       "file": "docs/tech-stack.md"
@@ -53,9 +50,6 @@
     }
   ],
   "github.copilot.chat.testGeneration.instructions": [
-    {
-      "file": ".github/copilot-instructions.md"
-    },
     {
       "file": ".github/testing-instructions.md"
     },
@@ -92,4 +86,7 @@
       "file": "docs/guidelines/testing.md"
     }
   ],
+  "nxConsole.generateAiAgentRules": true,
+  "chat.mcp.enabled": true,
+  "chat.mcp.discovery.enabled": true
 }

Dockerfile

@@ -1,5 +1,5 @@
 #stage 1
-FROM node:18 as base
+FROM node:22 as base
 ARG IS_PRODUCTION=false
 ARG SEMVERSION=1.0.0
 ARG BuildUniqueID
@@ -8,7 +8,7 @@ WORKDIR /app
 COPY . .
 RUN umask 0022
 RUN npm version ${SEMVERSION}
-RUN npm install --always-auth=false
+RUN npm install --foreground-scripts
 RUN if [ "${IS_PRODUCTION}" = "true" ] ; then npm run-script build-prod ; else npm run-script build ; fi
 
 # stage final

apps/isa-app/.storybook/main.ts

@@ -2,8 +2,11 @@ import type { StorybookConfig } from '@storybook/angular';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
-  staticDirs: ['../src/assets'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+  ],
   previewHead: (head) => `
     ${head}
     <link href="/assets/fonts/fonts.css" rel="stylesheet" />

apps/isa-app/eslint.config.js

@@ -1,55 +1,55 @@
-import nx from '@nx/eslint-plugin';
-import baseConfig from '../../eslint.config.mjs';
-
-export default [
-  ...baseConfig,
-  ...nx.configs['flat/angular'],
-  ...nx.configs['flat/angular-template'],
-  {
-    files: ['**/*.ts'],
-    rules: {
-      '@angular-eslint/directive-selector': [
-        'error',
-        {
-          type: 'attribute',
-          prefix: 'app',
-          style: 'camelCase',
-        },
-      ],
-      '@angular-eslint/component-selector': [
-        'error',
-        {
-          type: 'element',
-          prefix: 'app',
-          style: 'kebab-case',
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/*.ts'],
-    rules: {
-      '@typescript-eslint/no-unused-expressions': 'warn',
-      'prefer-const': 'warn',
-      '@angular-eslint/contextual-lifecycle': 'warn',
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@angular-eslint/no-empty-lifecycle-method': 'warn',
-      '@typescript-eslint/no-inferrable-types': 'warn',
-      '@angular-eslint/component-selector': 'warn',
-      '@angular-eslint/prefer-standalone': 'warn',
-      '@typescript-eslint/no-inferrable-types': 'warn',
-      'no-empty-function': 'warn',
-      '@typescript-eslint/no-empty-function': 'warn',
-      '@typescript-eslint/no-unused-vars': 'warn',
-      '@angular-eslint/directive-selector': 'warn',
-    },
-  },
-  {
-    files: ['**/*.html'],
-    // Override or add rules here
-    rules: {
-      '@angular-eslint/template/elements-content': 'warn',
-      '@angular-eslint/template/no-autofocus': 'warn',
-    },
-  },
-];
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/no-unused-expressions': 'warn',
+      'prefer-const': 'warn',
+      '@angular-eslint/contextual-lifecycle': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@angular-eslint/no-empty-lifecycle-method': 'warn',
+      '@typescript-eslint/no-inferrable-types': 'warn',
+      '@angular-eslint/component-selector': 'warn',
+      '@angular-eslint/prefer-standalone': 'warn',
+      '@typescript-eslint/no-inferrable-types': 'warn',
+      'no-empty-function': 'warn',
+      '@typescript-eslint/no-empty-function': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@angular-eslint/directive-selector': 'warn',
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {
+      '@angular-eslint/template/elements-content': 'warn',
+      '@angular-eslint/template/no-autofocus': 'warn',
+    },
+  },
+];

apps/isa-app/project.json

@@ -38,7 +38,7 @@
         ],
         "styles": [
           "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/ui.scss",
+          "apps/isa-app/src/tailwind.scss",
           "apps/isa-app/src/styles.scss"
         ],
         "scripts": []
@@ -84,7 +84,8 @@
           "buildTarget": "isa-app:build:development"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -117,7 +118,19 @@
         "configDir": "apps/isa-app/.storybook",
         "browserTarget": "isa-app:build",
         "compodoc": false,
-        "styles": ["apps/isa-app/src/ui.scss", "apps/isa-app/src/styles.scss"]
+        "open": false,
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "apps/isa-app/src/assets",
+            "output": "/assets"
+          }
+        ],
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ]
       },
       "configurations": {
         "ci": {
@@ -132,33 +145,18 @@
         "outputDir": "dist/storybook/isa-app",
         "configDir": "apps/isa-app/.storybook",
         "browserTarget": "isa-app:build",
-        "compodoc": false
+        "compodoc": false,
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ]
       },
       "configurations": {
         "ci": {
           "quiet": true
         }
       }
-    },
-    "test-storybook": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "test-storybook -c apps/isa-app/.storybook --url=http://localhost:4400"
-      }
-    },
-    "static-storybook": {
-      "executor": "@nx/web:file-server",
-      "dependsOn": ["build-storybook"],
-      "options": {
-        "buildTarget": "isa-app:build-storybook",
-        "staticFilePath": "dist/storybook/isa-app",
-        "spa": true
-      },
-      "configurations": {
-        "ci": {
-          "buildTarget": "isa-app:build-storybook:ci"
-        }
-      }
     }
   }
 }

apps/isa-app/src/adapter/scan/dev.scan-adapter.ts

@@ -1,5 +1,9 @@
 import { inject, Injectable } from '@angular/core';
-import { PromptModalData, UiModalService, UiPromptModalComponent } from '@ui/modal';
+import {
+  PromptModalData,
+  UiModalService,
+  UiPromptModalComponent,
+} from '@ui/modal';
 import { Observable } from 'rxjs';
 import { ScanAdapter } from './scan-adapter';
 import { Config } from '@core/config';
@@ -14,9 +18,14 @@ export class DevScanAdapter implements ScanAdapter {
   private _config = inject(Config);
 
   async init(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      resolve(coerceBooleanProperty(this._config.get('dev-scanner')));
-    });
+    const enabled = localStorage.getItem('dev_scan_adapter_enabled') === 'true';
+    if (enabled) {
+      return new Promise((resolve, reject) => {
+        resolve(coerceBooleanProperty(this._config.get('dev-scanner')));
+      });
+    }
+
+    return false;
   }
 
   scan(): Observable<string> {
@@ -25,7 +34,8 @@ export class DevScanAdapter implements ScanAdapter {
         content: UiPromptModalComponent,
         title: 'Scannen',
         data: {
-          message: 'Diese Eingabemaske dient nur zu Entwicklungs und Testzwecken.',
+          message:
+            'Diese Eingabemaske dient nur zu Entwicklungs und Testzwecken.',
           placeholder: 'Scan Code',
           confirmText: 'weiter',
           cancelText: 'abbrechen',

apps/isa-app/src/adapter/scan/scandit/scandit.scan-adapter.ts

@@ -27,7 +27,10 @@ export class ScanditScanAdapter implements ScanAdapter {
   ) {}
 
   async init(): Promise<boolean> {
-    if (this._environmentService.isTablet()) {
+    const enabled =
+      localStorage.getItem('scandit_scan_adapter_enabled') === 'true';
+
+    if (enabled || this._environmentService.isTablet()) {
       try {
         await configure({
           licenseKey: this._config.get('licence.scandit'),
@@ -88,7 +91,11 @@ export class ScanditScanAdapter implements ScanAdapter {
 
   createOverlay() {
     const overlay = this._overlay.create({
-      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+      positionStrategy: this._overlay
+        .position()
+        .global()
+        .centerHorizontally()
+        .centerVertically(),
       hasBackdrop: true,
     });
 

apps/isa-app/src/app/app-routing.module.ts

@@ -1,184 +1,231 @@
-import { isDevMode, NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import {
-  CanActivateCartGuard,
-  CanActivateCartWithProcessIdGuard,
-  CanActivateCustomerGuard,
-  CanActivateCustomerOrdersGuard,
-  CanActivateCustomerOrdersWithProcessIdGuard,
-  CanActivateCustomerWithProcessIdGuard,
-  CanActivateGoodsInGuard,
-  CanActivateProductGuard,
-  CanActivateProductWithProcessIdGuard,
-  CanActivateRemissionGuard,
-  CanActivateTaskCalendarGuard,
-  IsAuthenticatedGuard,
-} from './guards';
-import { CanActivateAssortmentGuard } from './guards/can-activate-assortment.guard';
-import { CanActivatePackageInspectionGuard } from './guards/can-activate-package-inspection.guard';
-import { MainComponent } from './main.component';
-import { PreviewComponent } from './preview';
-import { BranchSectionResolver, CustomerSectionResolver, ProcessIdResolver } from './resolvers';
-import { TokenLoginComponent, TokenLoginModule } from './token-login';
-import { ProcessIdGuard } from './guards/process-id.guard';
-import {
-  ActivateProcessIdGuard,
-  ActivateProcessIdWithConfigKeyGuard,
-} from './guards/activate-process-id.guard';
-import { MatomoRouteData } from 'ngx-matomo-client';
-import { processResolverFn } from '@isa/core/process';
-import { provideScrollPositionRestoration } from '@isa/utils/scroll-position';
-
-const routes: Routes = [
-  { path: '', redirectTo: 'kunde/dashboard', pathMatch: 'full' },
-  {
-    path: 'login',
-    children: [
-      { path: ':token', component: TokenLoginComponent },
-      { path: '**', redirectTo: 'kunde', pathMatch: 'full' },
-    ],
-  },
-  {
-    path: '',
-    canActivate: [IsAuthenticatedGuard],
-    children: [
-      {
-        path: 'kunde',
-        component: MainComponent,
-        children: [
-          {
-            path: 'dashboard',
-            loadChildren: () => import('@page/dashboard').then((m) => m.DashboardModule),
-            data: {
-              matomo: {
-                title: 'Dashboard',
-              } as MatomoRouteData,
-            },
-          },
-          {
-            path: 'product',
-            loadChildren: () => import('@page/catalog').then((m) => m.PageCatalogModule),
-            canActivate: [CanActivateProductGuard],
-          },
-          {
-            path: ':processId/product',
-            loadChildren: () => import('@page/catalog').then((m) => m.PageCatalogModule),
-            canActivate: [CanActivateProductWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
-          },
-          {
-            path: 'order',
-            loadChildren: () => import('@page/customer-order').then((m) => m.CustomerOrderModule),
-            canActivate: [CanActivateCustomerOrdersGuard],
-          },
-          {
-            path: ':processId/order',
-            loadChildren: () => import('@page/customer-order').then((m) => m.CustomerOrderModule),
-            canActivate: [CanActivateCustomerOrdersWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
-          },
-          {
-            path: 'customer',
-            loadChildren: () => import('@page/customer').then((m) => m.CustomerModule),
-            canActivate: [CanActivateCustomerGuard],
-          },
-          {
-            path: ':processId/customer',
-            loadChildren: () => import('@page/customer').then((m) => m.CustomerModule),
-            canActivate: [CanActivateCustomerWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
-          },
-          {
-            path: 'cart',
-            loadChildren: () => import('@page/checkout').then((m) => m.PageCheckoutModule),
-            canActivate: [CanActivateCartGuard],
-          },
-          {
-            path: ':processId/cart',
-            loadChildren: () => import('@page/checkout').then((m) => m.PageCheckoutModule),
-            canActivate: [CanActivateCartWithProcessIdGuard],
-          },
-          {
-            path: 'pickup-shelf',
-            canActivate: [ProcessIdGuard],
-            // NOTE: This is a workaround for the canActivate guard not being called
-            loadChildren: () => import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
-          },
-          {
-            path: ':processId/pickup-shelf',
-            canActivate: [ActivateProcessIdGuard],
-            loadChildren: () => import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
-          },
-          { path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
-        ],
-        resolve: { section: CustomerSectionResolver },
-      },
-      {
-        path: 'filiale',
-        component: MainComponent,
-        children: [
-          {
-            path: 'task-calendar',
-            loadChildren: () => import('@page/task-calendar').then((m) => m.PageTaskCalendarModule),
-            canActivate: [CanActivateTaskCalendarGuard],
-          },
-          {
-            path: 'pickup-shelf',
-            canActivate: [ActivateProcessIdWithConfigKeyGuard('pickupShelf')],
-            // NOTE: This is a workaround for the canActivate guard not being called
-            loadChildren: () => import('@page/pickup-shelf').then((m) => m.PickupShelfInModule),
-          },
-          {
-            path: 'goods/in',
-            loadChildren: () => import('@page/goods-in').then((m) => m.GoodsInModule),
-            canActivate: [CanActivateGoodsInGuard],
-          },
-          {
-            path: 'remission',
-            loadChildren: () => import('@page/remission').then((m) => m.PageRemissionModule),
-            canActivate: [CanActivateRemissionGuard],
-          },
-          {
-            path: 'package-inspection',
-            loadChildren: () =>
-              import('@page/package-inspection').then((m) => m.PackageInspectionModule),
-            canActivate: [CanActivatePackageInspectionGuard],
-          },
-          {
-            path: 'assortment',
-            loadChildren: () => import('@page/assortment').then((m) => m.AssortmentModule),
-            canActivate: [CanActivateAssortmentGuard],
-          },
-          { path: '**', redirectTo: 'task-calendar', pathMatch: 'full' },
-        ],
-        resolve: { section: BranchSectionResolver },
-      },
-    ],
-  },
-  {
-    path: ':processId',
-    component: MainComponent,
-    resolve: { process: processResolverFn },
-    canActivate: [IsAuthenticatedGuard],
-    children: [
-      {
-        path: 'return',
-        loadChildren: () => import('@isa/oms/feature/return-search').then((m) => m.routes),
-      },
-    ],
-  },
-];
-
-if (isDevMode()) {
-  routes.unshift({
-    path: 'preview',
-    component: PreviewComponent,
-  });
-}
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes), TokenLoginModule],
-  exports: [RouterModule],
-  providers: [provideScrollPositionRestoration()],
-})
-export class AppRoutingModule {}
+import { isDevMode, NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {
+  CanActivateCartGuard,
+  CanActivateCartWithProcessIdGuard,
+  CanActivateCustomerGuard,
+  CanActivateCustomerOrdersGuard,
+  CanActivateCustomerOrdersWithProcessIdGuard,
+  CanActivateCustomerWithProcessIdGuard,
+  CanActivateGoodsInGuard,
+  CanActivateProductGuard,
+  CanActivateProductWithProcessIdGuard,
+  CanActivateRemissionGuard,
+  CanActivateTaskCalendarGuard,
+  IsAuthenticatedGuard,
+} from './guards';
+import { CanActivateAssortmentGuard } from './guards/can-activate-assortment.guard';
+import { CanActivatePackageInspectionGuard } from './guards/can-activate-package-inspection.guard';
+import { MainComponent } from './main.component';
+import { PreviewComponent } from './preview';
+import {
+  BranchSectionResolver,
+  CustomerSectionResolver,
+  ProcessIdResolver,
+} from './resolvers';
+import { TokenLoginComponent, TokenLoginModule } from './token-login';
+import { ProcessIdGuard } from './guards/process-id.guard';
+import {
+  ActivateProcessIdGuard,
+  ActivateProcessIdWithConfigKeyGuard,
+} from './guards/activate-process-id.guard';
+import { MatomoRouteData } from 'ngx-matomo-client';
+import { tabResolverFn } from '@isa/core/tabs';
+import { provideScrollPositionRestoration } from '@isa/utils/scroll-position';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'kunde/dashboard', pathMatch: 'full' },
+  {
+    path: 'login',
+    children: [
+      { path: ':token', component: TokenLoginComponent },
+      { path: '**', redirectTo: 'kunde', pathMatch: 'full' },
+    ],
+  },
+  {
+    path: '',
+    canActivate: [IsAuthenticatedGuard],
+    children: [
+      {
+        path: 'kunde',
+        component: MainComponent,
+        children: [
+          {
+            path: 'dashboard',
+            loadChildren: () =>
+              import('@page/dashboard').then((m) => m.DashboardModule),
+            data: {
+              matomo: {
+                title: 'Dashboard',
+              } as MatomoRouteData,
+            },
+          },
+          {
+            path: 'product',
+            loadChildren: () =>
+              import('@page/catalog').then((m) => m.PageCatalogModule),
+            canActivate: [CanActivateProductGuard],
+          },
+          {
+            path: ':processId/product',
+            loadChildren: () =>
+              import('@page/catalog').then((m) => m.PageCatalogModule),
+            canActivate: [CanActivateProductWithProcessIdGuard],
+            resolve: { processId: ProcessIdResolver },
+          },
+          {
+            path: 'order',
+            loadChildren: () =>
+              import('@page/customer-order').then((m) => m.CustomerOrderModule),
+            canActivate: [CanActivateCustomerOrdersGuard],
+          },
+          {
+            path: ':processId/order',
+            loadChildren: () =>
+              import('@page/customer-order').then((m) => m.CustomerOrderModule),
+            canActivate: [CanActivateCustomerOrdersWithProcessIdGuard],
+            resolve: { processId: ProcessIdResolver },
+          },
+          {
+            path: 'customer',
+            loadChildren: () =>
+              import('@page/customer').then((m) => m.CustomerModule),
+            canActivate: [CanActivateCustomerGuard],
+          },
+          {
+            path: ':processId/customer',
+            loadChildren: () =>
+              import('@page/customer').then((m) => m.CustomerModule),
+            canActivate: [CanActivateCustomerWithProcessIdGuard],
+            resolve: { processId: ProcessIdResolver },
+          },
+          {
+            path: 'cart',
+            loadChildren: () =>
+              import('@page/checkout').then((m) => m.PageCheckoutModule),
+            canActivate: [CanActivateCartGuard],
+          },
+          {
+            path: ':processId/cart',
+            loadChildren: () =>
+              import('@page/checkout').then((m) => m.PageCheckoutModule),
+            canActivate: [CanActivateCartWithProcessIdGuard],
+          },
+          {
+            path: 'pickup-shelf',
+            canActivate: [ProcessIdGuard],
+            // NOTE: This is a workaround for the canActivate guard not being called
+            loadChildren: () =>
+              import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
+          },
+          {
+            path: ':processId/pickup-shelf',
+            canActivate: [ActivateProcessIdGuard],
+            loadChildren: () =>
+              import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
+          },
+          { path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
+        ],
+        resolve: { section: CustomerSectionResolver },
+      },
+      {
+        path: 'filiale',
+        component: MainComponent,
+        children: [
+          {
+            path: 'task-calendar',
+            loadChildren: () =>
+              import('@page/task-calendar').then(
+                (m) => m.PageTaskCalendarModule,
+              ),
+            canActivate: [CanActivateTaskCalendarGuard],
+          },
+          {
+            path: 'pickup-shelf',
+            canActivate: [ActivateProcessIdWithConfigKeyGuard('pickupShelf')],
+            // NOTE: This is a workaround for the canActivate guard not being called
+            loadChildren: () =>
+              import('@page/pickup-shelf').then((m) => m.PickupShelfInModule),
+          },
+          {
+            path: 'goods/in',
+            loadChildren: () =>
+              import('@page/goods-in').then((m) => m.GoodsInModule),
+            canActivate: [CanActivateGoodsInGuard],
+          },
+          {
+            path: 'remission',
+            loadChildren: () =>
+              import('@page/remission').then((m) => m.PageRemissionModule),
+            canActivate: [CanActivateRemissionGuard],
+          },
+          {
+            path: 'package-inspection',
+            loadChildren: () =>
+              import('@page/package-inspection').then(
+                (m) => m.PackageInspectionModule,
+              ),
+            canActivate: [CanActivatePackageInspectionGuard],
+          },
+          {
+            path: 'assortment',
+            loadChildren: () =>
+              import('@page/assortment').then((m) => m.AssortmentModule),
+            canActivate: [CanActivateAssortmentGuard],
+          },
+          { path: '**', redirectTo: 'task-calendar', pathMatch: 'full' },
+        ],
+        resolve: { section: BranchSectionResolver },
+      },
+    ],
+  },
+  {
+    path: ':tabId',
+    component: MainComponent,
+    resolve: { process: tabResolverFn, tab: tabResolverFn },
+    canActivate: [IsAuthenticatedGuard],
+    children: [
+      {
+        path: 'return',
+        loadChildren: () =>
+          import('@isa/oms/feature/return-search').then((m) => m.routes),
+      },
+      {
+        path: 'remission',
+        children: [
+          {
+            path: 'return-receipt',
+            loadChildren: () =>
+              import(
+                '@isa/remission/feature/remission-return-receipt-list'
+              ).then((m) => m.routes),
+          },
+          {
+            path: '',
+            loadChildren: () =>
+              import('@isa/remission/feature/remission-list').then(
+                (m) => m.routes,
+              ),
+          },
+        ],
+      },
+    ],
+  },
+];
+
+if (isDevMode()) {
+  routes.unshift({
+    path: 'preview',
+    component: PreviewComponent,
+  });
+}
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { bindToComponentInputs: true }),
+    TokenLoginModule,
+  ],
+  exports: [RouterModule],
+  providers: [provideScrollPositionRestoration()],
+})
+export class AppRoutingModule {}

apps/isa-app/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
   Component,
   effect,
@@ -10,6 +10,7 @@ import {
   Renderer2,
   signal,
   untracked,
+  DOCUMENT
 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { SwUpdate } from '@angular/service-worker';

apps/isa-app/src/app/app.module.ts

@@ -1,5 +1,10 @@
-import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
+  HTTP_INTERCEPTORS,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import {
+  DEFAULT_CURRENCY_CODE,
   ErrorHandler,
   Injector,
   LOCALE_ID,
@@ -24,7 +29,10 @@ import { environment } from '../environments/environment';
 import { AppSwaggerModule } from './app-swagger.module';
 import { AppDomainModule } from './app-domain.module';
 import { UiModalModule } from '@ui/modal';
-import { NotificationsHubModule, NOTIFICATIONS_HUB_OPTIONS } from '@hub/notifications';
+import {
+  NotificationsHubModule,
+  NOTIFICATIONS_HUB_OPTIONS,
+} from '@hub/notifications';
 import { SignalRHubOptions } from '@core/signalr';
 import { CoreBreadcrumbModule } from '@core/breadcrumb';
 import { UiCommonModule } from '@ui/common';
@@ -36,7 +44,11 @@ import { HttpErrorInterceptor } from './interceptors';
 import { CoreLoggerModule, LOG_PROVIDER } from '@core/logger';
 import { IsaLogProvider } from './providers';
 import { IsaErrorHandler } from './providers/isa.error-handler';
-import { ScanAdapterModule, ScanAdapterService, ScanditScanAdapterModule } from '@adapter/scan';
+import {
+  ScanAdapterModule,
+  ScanAdapterService,
+  ScanditScanAdapterModule,
+} from '@adapter/scan';
 import { RootStateService } from './store/root-state.service';
 import * as Commands from './commands';
 import { PreviewComponent } from './preview';
@@ -45,11 +57,22 @@ import { ShellModule } from '@shared/shell';
 import { MainComponent } from './main.component';
 import { IconModule } from '@shared/components/icon';
 import { NgIconsModule } from '@ng-icons/core';
-import { matClose, matWifi, matWifiOff } from '@ng-icons/material-icons/baseline';
+import {
+  matClose,
+  matWifi,
+  matWifiOff,
+} from '@ng-icons/material-icons/baseline';
 import { NetworkStatusService } from './services/network-status.service';
 import { firstValueFrom } from 'rxjs';
 import { provideMatomo } from 'ngx-matomo-client';
 import { withRouter, withRouteData } from 'ngx-matomo-client';
+import {
+  provideLogging,
+  withLogLevel,
+  LogLevel,
+  withSink,
+  ConsoleLogSink,
+} from '@isa/core/logging';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -103,7 +126,13 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
         '⚡<br><br><b>Fehler bei der Initialisierung</b><br><br>Bitte prüfen Sie die Netzwerkverbindung (WLAN).<br><br>';
 
       const reload = document.createElement('button');
-      reload.classList.add('bg-brand', 'text-white', 'p-2', 'rounded', 'cursor-pointer');
+      reload.classList.add(
+        'bg-brand',
+        'text-white',
+        'p-2',
+        'rounded',
+        'cursor-pointer',
+      );
       reload.innerHTML = 'App neu laden';
       reload.onclick = () => window.location.reload();
       statusElement.appendChild(reload);
@@ -167,7 +196,10 @@ export function _notificationsHubOptionsFactory(
   ],
   providers: [
     provideAppInitializer(() => {
-      const initializerFn = _appInitializerFactory(inject(Config), inject(Injector));
+      const initializerFn = _appInitializerFactory(
+        inject(Config),
+        inject(Injector),
+      );
       return initializerFn();
     }),
     {
@@ -196,6 +228,11 @@ export function _notificationsHubOptionsFactory(
       withRouter(),
       withRouteData(),
     ),
+    provideLogging(withLogLevel(LogLevel.Debug), withSink(ConsoleLogSink)),
+    {
+      provide: DEFAULT_CURRENCY_CODE,
+      useValue: 'EUR',
+    },
   ],
 })
 export class AppModule {}

apps/isa-app/src/app/guards/can-activate-customer.guard.ts

@@ -1,12 +1,22 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
-import { ApplicationProcess, ApplicationService } from '@core/application';
-import { DomainCheckoutService } from '@domain/checkout';
-import { CustomerSearchNavigation } from '@shared/services/navigation';
-import { first } from 'rxjs/operators';
+import { Injectable } from "@angular/core";
+import {
+  ActivatedRouteSnapshot,
+  Router,
+  RouterStateSnapshot,
+} from "@angular/router";
+import { ApplicationProcess, ApplicationService } from "@core/application";
+import { DomainCheckoutService } from "@domain/checkout";
+import { logger } from "@isa/core/logging";
+import { CustomerSearchNavigation } from "@shared/services/navigation";
+import { first } from "rxjs/operators";
 
-@Injectable({ providedIn: 'root' })
+@Injectable({ providedIn: "root" })
 export class CanActivateCustomerGuard {
+  #logger = logger(() => ({
+    context: "CanActivateCustomerGuard",
+    tags: ["guard", "customer", "navigation"],
+  }));
+
   constructor(
     private readonly _applicationService: ApplicationService,
     private readonly _checkoutService: DomainCheckoutService,
@@ -14,36 +24,77 @@ export class CanActivateCustomerGuard {
     private readonly _navigation: CustomerSearchNavigation,
   ) {}
 
-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    const processes = await this._applicationService.getProcesses$('customer').pipe(first()).toPromise();
-    let lastActivatedProcessId = (
+  async canActivate(
+    route: ActivatedRouteSnapshot,
+    { url }: RouterStateSnapshot,
+  ) {
+    if (url.startsWith("/kunde/customer/search/")) {
+      const processId = Date.now(); // Generate a new process ID
+      // Extract parts before and after the pattern
+      const parts = url.split("/kunde/customer/");
+      if (parts.length === 2) {
+        const prefix = parts[0] + "/kunde/";
+        const suffix = "customer/" + parts[1];
+
+        // Construct the new URL with process ID inserted
+        const newUrl = `${prefix}${processId}/${suffix}`;
+
+        this.#logger.info("Redirecting to URL with process ID", () => ({
+          originalUrl: url,
+          newUrl,
+          processId,
+        }));
+
+        // Navigate to the new URL and prevent original navigation
+        this._router.navigateByUrl(newUrl);
+        return false;
+      }
+    }
+
+    const processes = await this._applicationService
+      .getProcesses$("customer")
+      .pipe(first())
+      .toPromise();
+    const lastActivatedProcessId = (
       await this._applicationService
-        .getLastActivatedProcessWithSectionAndType$('customer', 'cart')
+        .getLastActivatedProcessWithSectionAndType$("customer", "cart")
         .pipe(first())
         .toPromise()
     )?.id;
 
     const lastActivatedCartCheckoutProcessId = (
       await this._applicationService
-        .getLastActivatedProcessWithSectionAndType$('customer', 'cart-checkout')
+        .getLastActivatedProcessWithSectionAndType$("customer", "cart-checkout")
         .pipe(first())
         .toPromise()
     )?.id;
 
     const lastActivatedGoodsOutProcessId = (
       await this._applicationService
-        .getLastActivatedProcessWithSectionAndType$('customer', 'goods-out')
+        .getLastActivatedProcessWithSectionAndType$("customer", "goods-out")
         .pipe(first())
         .toPromise()
     )?.id;
 
-    const activatedProcessId = await this._applicationService.getActivatedProcessId$().pipe(first()).toPromise();
+    const activatedProcessId = await this._applicationService
+      .getActivatedProcessId$()
+      .pipe(first())
+      .toPromise();
 
     // Darf nur reinkommen wenn der aktuell aktive Tab ein Bestellabschluss Tab ist
-    if (!!lastActivatedCartCheckoutProcessId && lastActivatedCartCheckoutProcessId === activatedProcessId) {
-      await this.fromCartCheckoutProcess(processes, lastActivatedCartCheckoutProcessId);
+    if (
+      !!lastActivatedCartCheckoutProcessId &&
+      lastActivatedCartCheckoutProcessId === activatedProcessId
+    ) {
+      await this.fromCartCheckoutProcess(
+        processes,
+        lastActivatedCartCheckoutProcessId,
+      );
       return false;
-    } else if (!!lastActivatedGoodsOutProcessId && lastActivatedGoodsOutProcessId === activatedProcessId) {
+    } else if (
+      !!lastActivatedGoodsOutProcessId &&
+      lastActivatedGoodsOutProcessId === activatedProcessId
+    ) {
       await this.fromGoodsOutProcess(processes, lastActivatedGoodsOutProcessId);
       return false;
     }
@@ -68,25 +119,28 @@ export class CanActivateCustomerGuard {
     const newProcessId = Date.now();
     await this._applicationService.createProcess({
       id: newProcessId,
-      type: 'cart',
-      section: 'customer',
-      name: `Vorgang ${this.processNumber(processes.filter((process) => process.type === 'cart'))}`,
+      type: "cart",
+      section: "customer",
+      name: `Vorgang ${this.processNumber(processes.filter((process) => process.type === "cart"))}`,
     });
 
     await this.navigateToDefaultRoute(newProcessId);
   }
 
   // Bei offener Bestellbestätigung und Klick auf Footer Kundensuche
-  async fromCartCheckoutProcess(processes: ApplicationProcess[], processId: number) {
+  async fromCartCheckoutProcess(
+    processes: ApplicationProcess[],
+    processId: number,
+  ) {
     // Um alle Checkout Daten zu resetten die mit dem Prozess assoziiert sind
     this._checkoutService.removeProcess({ processId });
 
     // Ändere type cart-checkout zu cart
     this._applicationService.patchProcess(processId, {
       id: processId,
-      type: 'cart',
-      section: 'customer',
-      name: `Vorgang ${this.processNumber(processes.filter((process) => process.type === 'cart'))}`,
+      type: "cart",
+      section: "customer",
+      name: `Vorgang ${this.processNumber(processes.filter((process) => process.type === "cart"))}`,
       data: {},
     });
 
@@ -95,22 +149,31 @@ export class CanActivateCustomerGuard {
   }
 
   // Bei offener Warenausgabe und Klick auf Footer Kundensuche
-  async fromGoodsOutProcess(processes: ApplicationProcess[], processId: number) {
-    const buyer = await this._checkoutService.getBuyer({ processId }).pipe(first()).toPromise();
-    const customerFeatures = await this._checkoutService.getCustomerFeatures({ processId }).pipe(first()).toPromise();
+  async fromGoodsOutProcess(
+    processes: ApplicationProcess[],
+    processId: number,
+  ) {
+    const buyer = await this._checkoutService
+      .getBuyer({ processId })
+      .pipe(first())
+      .toPromise();
+    const customerFeatures = await this._checkoutService
+      .getCustomerFeatures({ processId })
+      .pipe(first())
+      .toPromise();
     const name = buyer
       ? customerFeatures?.b2b
         ? buyer.organisation?.name
           ? buyer.organisation?.name
           : buyer.lastName
         : buyer.lastName
-      : `Vorgang ${this.processNumber(processes.filter((process) => process.type === 'cart'))}`;
+      : `Vorgang ${this.processNumber(processes.filter((process) => process.type === "cart"))}`;
 
     // Ändere type goods-out zu cart
     this._applicationService.patchProcess(processId, {
       id: processId,
-      type: 'cart',
-      section: 'customer',
+      type: "cart",
+      section: "customer",
       name,
     });
 
@@ -119,12 +182,20 @@ export class CanActivateCustomerGuard {
   }
 
   processNumber(processes: ApplicationProcess[]) {
-    const processNumbers = processes?.map((process) => Number(process?.name?.replace(/\D/g, '')));
-    return !!processNumbers && processNumbers.length > 0 ? this.findMissingNumber(processNumbers) : 1;
+    const processNumbers = processes?.map((process) =>
+      Number(process?.name?.replace(/\D/g, "")),
+    );
+    return !!processNumbers && processNumbers.length > 0
+      ? this.findMissingNumber(processNumbers)
+      : 1;
   }
 
   findMissingNumber(processNumbers: number[]) {
-    for (let missingNumber = 1; missingNumber < Math.max(...processNumbers); missingNumber++) {
+    for (
+      let missingNumber = 1;
+      missingNumber < Math.max(...processNumbers);
+      missingNumber++
+    ) {
       if (!processNumbers.find((number) => number === missingNumber)) {
         return missingNumber;
       }

apps/isa-app/src/app/preview/preview.component.ts

@@ -1,7 +1,6 @@
 import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
-import { BranchSelectorComponent } from '@shared/components/branch-selector';
+import { Component } from '@angular/core';
 import { BranchDTO } from '@generated/swagger/checkout-api';
 import { BehaviorSubject } from 'rxjs';
 
@@ -9,9 +8,9 @@ import { BehaviorSubject } from 'rxjs';
   selector: 'app-preview',
   templateUrl: 'preview.component.html',
   styleUrls: ['preview.component.css'],
-  imports: [CommonModule, BranchSelectorComponent, PlatformModule],
+  imports: [CommonModule, PlatformModule],
 })
-export class PreviewComponent implements OnInit {
+export class PreviewComponent {
   selectedBranch$ = new BehaviorSubject<BranchDTO>({});
 
   get appVersion() {
@@ -24,7 +23,7 @@ export class PreviewComponent implements OnInit {
 
   get navigator() {
     const nav = {};
-    for (let i in window.navigator) nav[i] = navigator[i];
+    for (const i in window.navigator) nav[i] = navigator[i];
     return nav;
   }
 
@@ -51,8 +50,6 @@ export class PreviewComponent implements OnInit {
 
   constructor(private readonly _platform: Platform) {}
 
-  ngOnInit() {}
-
   setNewBranch(branch: BranchDTO) {
     this.selectedBranch$.next(branch);
   }

apps/isa-app/src/app/providers/isa.error-handler.ts

@@ -1,11 +1,16 @@
-import { HttpErrorResponse } from '@angular/common/http';
-import { ErrorHandler, Injectable } from '@angular/core';
-import { AuthService } from '@core/auth';
-import { DialogModel, UiDialogModalComponent, UiErrorModalComponent, UiModalService } from '@ui/modal';
-import { IsaLogProvider } from './isa.log-provider';
-import { LogLevel } from '@core/logger';
+import { HttpErrorResponse } from "@angular/common/http";
+import { ErrorHandler, Injectable } from "@angular/core";
+import { AuthService } from "@core/auth";
+import {
+  DialogModel,
+  UiDialogModalComponent,
+  UiErrorModalComponent,
+  UiModalService,
+} from "@ui/modal";
+import { IsaLogProvider } from "./isa.log-provider";
+import { LogLevel } from "@core/logger";
 
-@Injectable({ providedIn: 'root' })
+@Injectable({ providedIn: "root" })
 export class IsaErrorHandler implements ErrorHandler {
   constructor(
     private _modal: UiModalService,
@@ -17,7 +22,7 @@ export class IsaErrorHandler implements ErrorHandler {
     console.error(error);
 
     // Bei Klick auf Abbrechen auf der Login Seite erneut zur Login Seite weiterleiten
-    if (error?.type === 'token_error') {
+    if (error?.type === "token_error") {
       this._authService.login();
       return;
     }
@@ -26,11 +31,14 @@ export class IsaErrorHandler implements ErrorHandler {
       await this._modal
         .open({
           content: UiDialogModalComponent,
-          title: 'Sitzung abgelaufen',
+          title: "Sitzung abgelaufen",
           data: {
             handleCommand: false,
-            content: 'Sie waren zu lange nicht in der ISA aktiv. Bitte melden Sie sich erneut an',
-            actions: [{ command: 'CLOSE', selected: true, label: 'Erneut anmelden' }],
+            content:
+              "Sie waren zu lange nicht in der ISA aktiv. Bitte melden Sie sich erneut an",
+            actions: [
+              { command: "CLOSE", selected: true, label: "Erneut anmelden" },
+            ],
           } as DialogModel,
         })
         .afterClosed$.toPromise();
@@ -39,7 +47,11 @@ export class IsaErrorHandler implements ErrorHandler {
       return;
     }
 
-    this._isaLogProvider.log(LogLevel.ERROR, 'Client Error', error);
+    try {
+      this._isaLogProvider.log(LogLevel.ERROR, "Client Error", error);
+    } catch (logError) {
+      console.error("Error logging to IsaLogProvider:", logError);
+    }
 
     // this._modal.open({
     //   content: UiErrorModalComponent,

apps/isa-app/src/app/providers/isa.log-provider.ts

@@ -1,28 +1,36 @@
-import { Injectable, Injector } from '@angular/core';
-import { LogLevel, LogProvider } from '@core/logger';
-import { UserStateService } from '@generated/swagger/isa-api';
-import { environment } from '../../environments/environment';
+import { Injectable } from "@angular/core";
+import { LogLevel, LogProvider } from "@core/logger";
+import { UserStateService } from "@generated/swagger/isa-api";
+import { environment } from "../../environments/environment";
 
-@Injectable({ providedIn: 'root' })
+@Injectable({ providedIn: "root" })
 export class IsaLogProvider implements LogProvider {
   static InfoService: UserStateService | undefined;
 
-  constructor() {}
-
-  log(logLevel: LogLevel, message: string, error: Error, ...optionalParams: any[]): void {
-    if (!environment.production && (logLevel === LogLevel.WARN || logLevel === LogLevel.ERROR)) {
-      IsaLogProvider.InfoService?.UserStateSaveLog({
-        logType: logLevel,
-        message: message,
-        content: JSON.stringify({
-          error: error?.name,
-          message: error?.message,
-          stack: error?.stack,
-          data: optionalParams,
-        }),
-      })
-        .toPromise()
-        .catch(() => {});
+  log(
+    logLevel: LogLevel,
+    message: string,
+    error: Error,
+    ...optionalParams: any[]
+  ): void {
+    try {
+      if (
+        !environment.production &&
+        (logLevel === LogLevel.WARN || logLevel === LogLevel.ERROR)
+      ) {
+        IsaLogProvider.InfoService?.UserStateSaveLog({
+          logType: logLevel,
+          message: message,
+          content: JSON.stringify({
+            error: error?.name,
+            message: error?.message,
+            stack: error?.stack,
+            data: optionalParams,
+          }),
+        }).toPromise();
+      }
+    } catch (error) {
+      console.error("Error logging to InfoService:", error);
     }
   }
 }

apps/isa-app/src/app/store/root-state.service.ts

@@ -1,18 +1,18 @@
-import { Injectable } from '@angular/core';
-import { Logger, LogLevel } from '@core/logger';
-import { Store } from '@ngrx/store';
-import { debounceTime, switchMap, takeUntil } from 'rxjs/operators';
-import { RootState } from './root.state';
-import packageInfo from 'packageJson';
-import { environment } from '../../environments/environment';
-import { Subject } from 'rxjs';
-import { AuthService } from '@core/auth';
-import { injectStorage, UserStorageProvider } from '@isa/core/storage';
-import { isEqual } from 'lodash';
+import { Injectable } from "@angular/core";
+import { Logger, LogLevel } from "@core/logger";
+import { Store } from "@ngrx/store";
+import { debounceTime, switchMap, takeUntil } from "rxjs/operators";
+import { RootState } from "./root.state";
+import packageInfo from "packageJson";
+import { environment } from "../../environments/environment";
+import { Subject } from "rxjs";
+import { AuthService } from "@core/auth";
+import { injectStorage, UserStorageProvider } from "@isa/core/storage";
+import { isEqual } from "lodash";
 
-@Injectable({ providedIn: 'root' })
+@Injectable({ providedIn: "root" })
 export class RootStateService {
-  static LOCAL_STORAGE_KEY = 'ISA_APP_INITIALSTATE';
+  static LOCAL_STORAGE_KEY = "ISA_APP_INITIALSTATE";
 
   #storage = injectStorage(UserStorageProvider);
 
@@ -29,14 +29,17 @@ export class RootStateService {
       );
     }
 
-    window['clearUserState'] = () => {
+    window["clearUserState"] = () => {
       this.clear();
     };
   }
 
   async init() {
     await this.load();
-    this._store.dispatch({ type: 'HYDRATE', payload: RootStateService.LoadFromLocalStorage() });
+    this._store.dispatch({
+      type: "HYDRATE",
+      payload: RootStateService.LoadFromLocalStorage(),
+    });
     this.initSave();
   }
 
@@ -50,14 +53,10 @@ export class RootStateService {
           const data = {
             ...state,
             version: packageInfo.version,
-            sub: this._authService.getClaimByKey('sub'),
+            sub: this._authService.getClaimByKey("sub"),
           };
           RootStateService.SaveToLocalStorageRaw(JSON.stringify(data));
-          return this.#storage.set('state', {
-            ...state,
-            version: packageInfo.version,
-            sub: this._authService.getClaimByKey('sub'),
-          });
+          return this.#storage.set("state", data);
         }),
       )
       .subscribe();
@@ -68,7 +67,7 @@ export class RootStateService {
    */
   async load(): Promise<boolean> {
     try {
-      const res = await this.#storage.get('state');
+      const res = await this.#storage.get("state");
 
       const storageContent = RootStateService.LoadFromLocalStorageRaw();
 
@@ -88,7 +87,7 @@ export class RootStateService {
   async clear() {
     try {
       this._cancelSave.next();
-      await this.#storage.clear('state');
+      await this.#storage.clear("state");
       await new Promise((resolve) => setTimeout(resolve, 100));
       RootStateService.RemoveFromLocalStorage();
       await new Promise((resolve) => setTimeout(resolve, 100));
@@ -112,7 +111,7 @@ export class RootStateService {
       try {
         return JSON.parse(raw);
       } catch (error) {
-        console.error('Error parsing local storage:', error);
+        console.error("Error parsing local storage:", error);
         this.RemoveFromLocalStorage();
       }
     }

apps/isa-app/src/config/config.feature.json

@@ -1,86 +1,85 @@
 {
-    "title": "ISA - Feature",
-    "silentRefresh": {
-        "interval": 300000
-    },
-    "@cdn/product-image": {
-        "url": "https://produktbilder.paragon-data.net"
-    },
-    "@core/auth": {
-        "issuer": "https://sso-test.paragon-data.de",
-        "clientId": "hug-isa",
-        "responseType": "id_token token",
-        "oidc": true,
-        "scope": "openid profile cmf_user isa-isa-webapi isa-checkout-webapi isa-cat-webapi isa-ava-webapi isa-crm-webapi isa-review-webapi isa-kpi-webapi isa-oms-webapi isa-nbo-webapi isa-print-webapi eis-service isa-inv-webapi isa-wws-webapi"
-    },
-    "@core/logger": {
-        "logLevel": "debug"
-    },
-    "@domain/checkout": {
-        "olaExpiration": "5m"
-    },
-    "@swagger/isa": {
-        "rootUrl": "https://isa-test.paragon-data.net/isa/v1"
-    },
-    "@swagger/cat": {
-        "rootUrl": "https://isa-test.paragon-data.net/catsearch/v6"
-    },
-    "@swagger/av": {
-        "rootUrl": "https://isa-test.paragon-data.net/ava/v6"
-    },
-    "@swagger/checkout": {
-        "rootUrl": "https://isa-test.paragon-data.net/checkout/v6"
-    },
-    "@swagger/crm": {
-        "rootUrl": "https://isa-test.paragon-data.net/crm/v6"
-    },
-    "@swagger/oms": {
-        "rootUrl": "https://isa-test.paragon-data.net/oms/v6"
-    },
-    "@swagger/print": {
-        "rootUrl": "https://isa-test.paragon-data.net/print/v1"
-    },
-    "@swagger/eis": {
-        "rootUrl": "https://filialinformationsystem-test.paragon-systems.de/eiswebapi/v1"
-    },
-    "@swagger/remi": {
-        "rootUrl": "https://isa-test.paragon-data.net/inv/v6"
-    },
-    "@swagger/wws": {
-        "rootUrl": "https://isa-test.paragon-data.net/wws/v1"
-    },
-    "hubs": {
-        "notifications": {
-            "url": "https://isa-test.paragon-data.net/isa/v1/rt",
-            "enableAutomaticReconnect": false,
-            "httpOptions": {
-                "transport": 1,
-                "logMessageContent": true,
-                "skipNegotiation": true
-            }
-        }
-    },
-    "process": {
-        "ids": {
-            "goodsOut": 1000,
-            "goodsIn": 2000,
-            "taskCalendar": 3000,
-            "remission": 4000,
-            "packageInspection": 5000,
-            "assortment": 6000,
-            "pickupShelf": 7000
-        }
-    },
-    "checkForUpdates": 3600000,
-    "licence": {
-        "scandit": "Ae8F2Wx2RMq5Lvn7UUAlWzVFZTt2+ubMAF8XtDpmPlNkBeG/LWs1M7AbgDW0LQqYLnszClEENaEHS56/6Ts2vrJ1Ux03CXUjK3jUvZpF5OchXR1CpnmpepJ6WxPCd7LMVHUGG1BbwPLDTFjP3y8uT0caTSmmGrYQWAs4CZcEF+ZBabP0z7vfm+hCZF/ebj9qqCJZcW8nH/n19hohshllzYBjFXjh87P2lIh1s6yZS3OaQWWXo/o0AKdxx7T6CVyR0/G5zq6uYJWf6rs3euUBEhpzOZHbHZK86Lvy2AVBEyVkkcttlDW1J2fA4l1W1JV/Xibz8AQV6kG482EpGF42KEoK48paZgX3e1AQsqUtmqzw294dcP4zMVstnw5/WrwKKi/5E/nOOJT2txYP1ZufIjPrwNFsqTlv7xCQlHjMzFGYwT816yD5qLRLbwOtjrkUPXNZLZ06T4upvWwJDmm8XgdeoDqMjHdcO4lwji1bl9EiIYJ/2qnsk9yZ2FqSaHzn4cbiL0f5u2HFlNAP0GUujGRlthGhHi6o4dFU+WAxKsFMKVt+SfoQUazNKHFVQgiAklTIZxIc/HUVzRvOLMxf+wFDerraBtcqGJg+g/5mrWYqeDBGhCBHtKiYf6244IJ4afzNTiH1/30SJcRzXwbEa3A7q1fJTx9/nLTOfVPrJKBQs7f/OQs2dA7LDCel8mzXdbjvsNQaeU5+iCIAq6zbTNKy1xT8wwj+VZrQmtNJs+qeznD+u29nCM24h8xCmRpvNPo4/Mww/lrTNrrNwLBSn1pMIwsH7yS9hH0v0oNAM3A6bVtk1D9qEkbyw+xZa+MZGpMP0D0CdcsqHalPcm5r/Ik="
-    },
-    "gender": {
-        "0": "Keine Anrede",
-        "1": "Enby",
-        "2": "Herr",
-        "4": "Frau"
-    },
-    "@shared/icon": "/assets/icons.json"
-
-}
+  "title": "ISA - Feature",
+  "silentRefresh": {
+    "interval": 300000
+  },
+  "@cdn/product-image": {
+    "url": "https://produktbilder.paragon-data.net"
+  },
+  "@core/auth": {
+    "issuer": "https://sso-test.paragon-data.de",
+    "clientId": "hug-isa",
+    "responseType": "id_token token",
+    "oidc": true,
+    "scope": "openid profile cmf_user isa-isa-webapi isa-checkout-webapi isa-cat-webapi isa-ava-webapi isa-crm-webapi isa-review-webapi isa-kpi-webapi isa-oms-webapi isa-nbo-webapi isa-print-webapi eis-service isa-inv-webapi isa-wws-webapi"
+  },
+  "@core/logger": {
+    "logLevel": "debug"
+  },
+  "@domain/checkout": {
+    "olaExpiration": "5m"
+  },
+  "@swagger/isa": {
+    "rootUrl": "https://isa-feature.paragon-data.net/isa/v1"
+  },
+  "@swagger/cat": {
+    "rootUrl": "https://isa-test.paragon-data.net/catsearch/v6"
+  },
+  "@swagger/av": {
+    "rootUrl": "https://isa-test.paragon-data.net/ava/v6"
+  },
+  "@swagger/checkout": {
+    "rootUrl": "https://isa-feature.paragon-data.net/checkout/v6"
+  },
+  "@swagger/crm": {
+    "rootUrl": "https://isa-feature.paragon-data.net/crm/v6"
+  },
+  "@swagger/oms": {
+    "rootUrl": "https://isa-feature.paragon-data.net/oms/v6"
+  },
+  "@swagger/print": {
+    "rootUrl": "https://isa-feature.paragon-data.net/print/v1"
+  },
+  "@swagger/eis": {
+    "rootUrl": "https://filialinformationsystem-test.paragon-systems.de/eiswebapi/v1"
+  },
+  "@swagger/remi": {
+    "rootUrl": "https://isa-feature.paragon-data.net/inv/v6"
+  },
+  "@swagger/wws": {
+    "rootUrl": "https://isa-test.paragon-data.net/wws/v1"
+  },
+  "hubs": {
+    "notifications": {
+      "url": "https://isa-feature.paragon-data.net/isa/v1/rt",
+      "enableAutomaticReconnect": false,
+      "httpOptions": {
+        "transport": 1,
+        "logMessageContent": true,
+        "skipNegotiation": true
+      }
+    }
+  },
+  "process": {
+    "ids": {
+      "goodsOut": 1000,
+      "goodsIn": 2000,
+      "taskCalendar": 3000,
+      "remission": 4000,
+      "packageInspection": 5000,
+      "assortment": 6000,
+      "pickupShelf": 7000
+    }
+  },
+  "checkForUpdates": 3600000,
+  "licence": {
+    "scandit": "Ae8F2Wx2RMq5Lvn7UUAlWzVFZTt2+ubMAF8XtDpmPlNkBeG/LWs1M7AbgDW0LQqYLnszClEENaEHS56/6Ts2vrJ1Ux03CXUjK3jUvZpF5OchXR1CpnmpepJ6WxPCd7LMVHUGG1BbwPLDTFjP3y8uT0caTSmmGrYQWAs4CZcEF+ZBabP0z7vfm+hCZF/ebj9qqCJZcW8nH/n19hohshllzYBjFXjh87P2lIh1s6yZS3OaQWWXo/o0AKdxx7T6CVyR0/G5zq6uYJWf6rs3euUBEhpzOZHbHZK86Lvy2AVBEyVkkcttlDW1J2fA4l1W1JV/Xibz8AQV6kG482EpGF42KEoK48paZgX3e1AQsqUtmqzw294dcP4zMVstnw5/WrwKKi/5E/nOOJT2txYP1ZufIjPrwNFsqTlv7xCQlHjMzFGYwT816yD5qLRLbwOtjrkUPXNZLZ06T4upvWwJDmm8XgdeoDqMjHdcO4lwji1bl9EiIYJ/2qnsk9yZ2FqSaHzn4cbiL0f5u2HFlNAP0GUujGRlthGhHi6o4dFU+WAxKsFMKVt+SfoQUazNKHFVQgiAklTIZxIc/HUVzRvOLMxf+wFDerraBtcqGJg+g/5mrWYqeDBGhCBHtKiYf6244IJ4afzNTiH1/30SJcRzXwbEa3A7q1fJTx9/nLTOfVPrJKBQs7f/OQs2dA7LDCel8mzXdbjvsNQaeU5+iCIAq6zbTNKy1xT8wwj+VZrQmtNJs+qeznD+u29nCM24h8xCmRpvNPo4/Mww/lrTNrrNwLBSn1pMIwsH7yS9hH0v0oNAM3A6bVtk1D9qEkbyw+xZa+MZGpMP0D0CdcsqHalPcm5r/Ik="
+  },
+  "gender": {
+    "0": "Keine Anrede",
+    "1": "Enby",
+    "2": "Herr",
+    "4": "Frau"
+  },
+  "@shared/icon": "/assets/icons.json"
+}

apps/isa-app/src/core/auth/auth.service.ts

@@ -1,13 +1,18 @@
-import { coerceArray } from '@angular/cdk/coercion';
-import { inject, Injectable } from '@angular/core';
-import { Config } from '@core/config';
-import { isNullOrUndefined } from '@utils/common';
-import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
-import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
-import { BehaviorSubject } from 'rxjs';
+import { coerceArray } from "@angular/cdk/coercion";
+import { inject, Injectable } from "@angular/core";
+import { Config } from "@core/config";
+import { isNullOrUndefined } from "@utils/common";
+import { AuthConfig, OAuthService } from "angular-oauth2-oidc";
+import { JwksValidationHandler } from "angular-oauth2-oidc-jwks";
+import { BehaviorSubject } from "rxjs";
+
+/**
+ * Storage key for the URL to redirect to after login
+ */
+const REDIRECT_URL_KEY = "auth_redirect_url";
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: "root",
 })
 export class AuthService {
   private readonly _initialized = new BehaviorSubject<boolean>(false);
@@ -16,28 +21,39 @@ export class AuthService {
   }
 
   private _authConfig: AuthConfig;
-
   constructor(
     private _config: Config,
     private readonly _oAuthService: OAuthService,
   ) {
     this._oAuthService.events?.subscribe((event) => {
-      if (event.type === 'token_received') {
-        console.log('SSO Token Expiration:', new Date(this._oAuthService.getAccessTokenExpiration()));
+      if (event.type === "token_received") {
+        console.log(
+          "SSO Token Expiration:",
+          new Date(this._oAuthService.getAccessTokenExpiration()),
+        );
+
+        // Handle redirect after successful authentication
+        setTimeout(() => {
+          const redirectUrl = this._getAndClearRedirectUrl();
+          if (redirectUrl) {
+            window.location.href = redirectUrl;
+          }
+        }, 100);
       }
     });
   }
 
   async init() {
     if (this._initialized.getValue()) {
-      throw new Error('AuthService is already initialized');
+      throw new Error("AuthService is already initialized");
     }
 
-    this._authConfig = this._config.get('@core/auth');
+    this._authConfig = this._config.get("@core/auth");
 
     this._authConfig.redirectUri = window.location.origin;
 
-    this._authConfig.silentRefreshRedirectUri = window.location.origin + '/silent-refresh.html';
+    this._authConfig.silentRefreshRedirectUri =
+      window.location.origin + "/silent-refresh.html";
     this._authConfig.useSilentRefresh = true;
 
     this._oAuthService.configure(this._authConfig);
@@ -55,12 +71,18 @@ export class AuthService {
   }
 
   isIdTokenValid() {
-    console.log('ID Token Expiration:', new Date(this._oAuthService.getIdTokenExpiration()));
+    console.log(
+      "ID Token Expiration:",
+      new Date(this._oAuthService.getIdTokenExpiration()),
+    );
     return this._oAuthService.hasValidIdToken();
   }
 
   isAccessTokenValid() {
-    console.log('ACCESS Token Expiration:', new Date(this._oAuthService.getAccessTokenExpiration()));
+    console.log(
+      "ACCESS Token Expiration:",
+      new Date(this._oAuthService.getAccessTokenExpiration()),
+    );
     return this._oAuthService.hasValidAccessToken();
   }
 
@@ -85,14 +107,31 @@ export class AuthService {
     if (isNullOrUndefined(token)) {
       return null;
     }
-    const base64Url = token.split('.')[1];
-    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const base64Url = token.split(".")[1];
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
 
     const encoded = window.atob(base64);
     return JSON.parse(encoded);
   }
 
+  /**
+   * Saves the URL to redirect to after successful login
+   */
+  _saveRedirectUrl(): void {
+    localStorage.setItem(REDIRECT_URL_KEY, window.location.href);
+  }
+
+  /**
+   * Gets and clears the saved redirect URL
+   */
+  _getAndClearRedirectUrl(): string | null {
+    const url = localStorage.getItem(REDIRECT_URL_KEY);
+    localStorage.removeItem(REDIRECT_URL_KEY);
+    return url;
+  }
+
   login() {
+    this._saveRedirectUrl();
     this._oAuthService.initLoginFlow();
   }
 
@@ -109,7 +148,7 @@ export class AuthService {
   hasRole(role: string | string[]) {
     const roles = coerceArray(role);
 
-    const userRoles = this.getClaimByKey('role');
+    const userRoles = this.getClaimByKey("role");
 
     if (isNullOrUndefined(userRoles)) {
       return false;
@@ -120,7 +159,10 @@ export class AuthService {
 
   async refresh() {
     try {
-      if (this._authConfig.responseType.includes('code') && this._authConfig.scope.includes('offline_access')) {
+      if (
+        this._authConfig.responseType.includes("code") &&
+        this._authConfig.scope.includes("offline_access")
+      ) {
         await this._oAuthService.refreshToken();
       } else {
         await this._oAuthService.silentRefresh();

apps/isa-app/src/core/logger/log.provider.ts

@@ -1,5 +1,4 @@
-import { Injectable } from '@angular/core';
-import { LogLevel } from './log-level';
+import { LogLevel } from "./log-level";
 
 export interface LogProvider {
   log(logLevel: LogLevel, message: string, ...optionalParams: any[]): void;

apps/isa-app/src/domain/printer/printer.service.ts

@@ -1,5 +1,9 @@
 import { Injectable } from '@angular/core';
-import { ArticleDTO, DisplayInfoDTO, EISPublicDocumentService } from '@generated/swagger/eis-api';
+import {
+  ArticleDTO,
+  DisplayInfoDTO,
+  EISPublicDocumentService,
+} from '@generated/swagger/eis-api';
 import {
   CatalogPrintService,
   CheckoutPrintService,
@@ -42,7 +46,9 @@ export class DomainPrinterService {
       map((response: any) => {
         if (response.error && response.error.status === 503) {
           return {
-            error: response.message ? response.message : 'Das Backend ist derzeit nicht erreichbar',
+            error: response.message
+              ? response.message
+              : 'Das Backend ist derzeit nicht erreichbar',
           };
         }
         if (response.error && response.error.name === 'TimeoutError') {
@@ -77,7 +83,9 @@ export class DomainPrinterService {
       map((response: any) => {
         if (response.error && response.error.status === 503) {
           return {
-            error: response.message ? response.message : 'Das Backend ist derzeit nicht erreichbar',
+            error: response.message
+              ? response.message
+              : 'Das Backend ist derzeit nicht erreichbar',
           };
         }
         if (response.error && response.error.name === 'TimeoutError') {
@@ -112,7 +120,9 @@ export class DomainPrinterService {
       map((response: any) => {
         if (response.error && response.error.status === 503) {
           return {
-            error: response.message ? response.message : 'Das Backend ist derzeit nicht erreichbar',
+            error: response.message
+              ? response.message
+              : 'Das Backend ist derzeit nicht erreichbar',
           };
         }
         if (response.error && response.error.name === 'TimeoutError') {
@@ -141,28 +151,61 @@ export class DomainPrinterService {
     );
   }
 
-  printOrder({ orderIds, printer }: { orderIds: number[]; printer: string }): Observable<ResponseArgs> {
+  printOrder({
+    orderIds,
+    printer,
+  }: {
+    orderIds: number[];
+    printer: string;
+  }): Observable<ResponseArgs> {
     const params = <any>{
       printer: printer,
       data: orderIds,
     };
-    return this.oMSPrintService.OMSPrintAbholscheinById(params).pipe(timeout(20000));
+    return this.oMSPrintService
+      .OMSPrintAbholscheinById(params)
+      .pipe(timeout(20000));
   }
 
-  printShippingNote({ receipts, printer }: { receipts: number[]; printer: string }) {
+  printShippingNote({
+    receipts,
+    printer,
+  }: {
+    receipts: number[];
+    printer: string;
+  }) {
     return this.oMSPrintService.OMSPrintLieferschein({
       printer,
       data: receipts,
     });
   }
 
-  printCompartmentLabel({ orderItemSubsetIds, printer }: { orderItemSubsetIds: number[]; printer: string }) {
+  printCompartmentLabel({
+    orderItemSubsetIds,
+    printer,
+  }: {
+    orderItemSubsetIds: number[];
+    printer: string;
+  }) {
     return this.oMSPrintService.OMSPrintAbholfachetikett({
       printer,
       data: orderItemSubsetIds,
     });
   }
 
+  printReturnReceipt({
+    receiptIds,
+    printer,
+  }: {
+    receiptIds: number[];
+    printer: string;
+  }) {
+    return this.oMSPrintService.OMSPrintReturnReceipt({
+      printer,
+      data: receiptIds,
+    });
+  }
+
   printKubiAgb({ p4mCode, printer }: { p4mCode: string; printer: string }) {
     return this._loyaltyCardPrintService.LoyaltyCardPrintPrintLoyaltyCardAGB({
       printer,
@@ -170,20 +213,36 @@ export class DomainPrinterService {
     });
   }
 
-  printProduct({ item, printer }: { item: ItemDTO; printer: string }): Observable<ResponseArgs> {
+  printProduct({
+    item,
+    printer,
+  }: {
+    item: ItemDTO;
+    printer: string;
+  }): Observable<ResponseArgs> {
     const params = <PrintRequestOfIEnumerableOfItemDTO>{
       printer: printer,
       data: [item],
     };
-    return this.catalogPrintService.CatalogPrintArtikelDetail(params).pipe(timeout(20000));
+    return this.catalogPrintService
+      .CatalogPrintArtikelDetail(params)
+      .pipe(timeout(20000));
   }
 
-  printCart({ cartId, printer }: { cartId: number; printer: string }): Observable<ResponseArgs> {
+  printCart({
+    cartId,
+    printer,
+  }: {
+    cartId: number;
+    printer: string;
+  }): Observable<ResponseArgs> {
     const params = <any>{
       printer: printer,
       data: cartId,
     };
-    return this.checkoutPrintService.CheckoutPrintWarenkorbById(params).pipe(timeout(20000));
+    return this.checkoutPrintService
+      .CheckoutPrintWarenkorbById(params)
+      .pipe(timeout(20000));
   }
 
   async printGoodsInLabel(subsetItemIds: number[]): Promise<ResponseArgs> {
@@ -223,7 +282,9 @@ export class DomainPrinterService {
   printProductListItemsResponse(
     payload: DocumentPayloadOfIEnumerableOfProductListItemDTO,
   ): Observable<ResponseArgsOfString> {
-    return this._productListService.ProductListProductListItemPdfAsBase64(payload);
+    return this._productListService.ProductListProductListItemPdfAsBase64(
+      payload,
+    );
   }
 
   printProductListItems({

apps/isa-app/src/domain/remission/remission.service.ts

@@ -1,5 +1,9 @@
 import { Injectable } from '@angular/core';
-import { ItemDTO, ListResponseArgsOfItemDTO, SearchService } from '@generated/swagger/cat-search-api';
+import {
+  ItemDTO,
+  ListResponseArgsOfItemDTO,
+  SearchService,
+} from '@generated/swagger/cat-search-api';
 import {
   RemiService,
   StockService,
@@ -18,7 +22,11 @@ import { memorize } from '@utils/common';
 import { Observable, of, throwError } from 'rxjs';
 import { catchError, map, shareReplay, switchMap } from 'rxjs/operators';
 import { RemissionListItem } from './defs';
-import { fromItemDto, mapFromReturnItemDTO, mapFromReturnSuggestionDTO } from './mappings';
+import {
+  fromItemDto,
+  mapFromReturnItemDTO,
+  mapFromReturnSuggestionDTO,
+} from './mappings';
 import { Logger } from '@core/logger';
 import { RemissionPlacementType } from '@domain/remission';
 
@@ -204,7 +212,10 @@ export class DomainRemissionService {
       );
   }
 
-  getStockInformation(items: RemissionListItem[], recalculate: boolean = false) {
+  getStockInformation(
+    items: RemissionListItem[],
+    recalculate: boolean = false,
+  ) {
     return this.getCurrentStock().pipe(
       switchMap((stock) =>
         this._stockService
@@ -218,7 +229,8 @@ export class DomainRemissionService {
             map((res) => {
               const o = items.map((item) => {
                 const stockInfo = res?.result?.find(
-                  (stockInfo) => stockInfo.itemId === +item.dto.product.catalogProductNumber,
+                  (stockInfo) =>
+                    stockInfo.itemId === +item.dto.product.catalogProductNumber,
                 );
 
                 if (!stockInfo) {
@@ -231,7 +243,8 @@ export class DomainRemissionService {
                   return { ...item, ...defaultStockData };
                 }
 
-                const availableStock = stockInfo.inStock - stockInfo.removedFromStock;
+                const availableStock =
+                  stockInfo.inStock - stockInfo.removedFromStock;
                 const inStock = availableStock < 0 ? 0 : availableStock;
 
                 let { remainingQuantity, remissionQuantity } = item;
@@ -249,7 +262,12 @@ export class DomainRemissionService {
                   }
                 }
 
-                return { ...item, remainingQuantity, remissionQuantity, inStock };
+                return {
+                  ...item,
+                  remainingQuantity,
+                  remissionQuantity,
+                  inStock,
+                };
               });
 
               return o;
@@ -259,7 +277,10 @@ export class DomainRemissionService {
     );
   }
 
-  getRequiredCapacities(params: { departments?: string[]; supplierId: number }) {
+  getRequiredCapacities(params: {
+    departments?: string[];
+    supplierId: number;
+  }) {
     return this.getCurrentStock().pipe(
       switchMap((stock) =>
         this._remiService
@@ -301,13 +322,18 @@ export class DomainRemissionService {
     );
   }
 
-  canAddReturnItem(item: ReturnItemDTO): Observable<BatchResponseArgsOfReturnItemDTOAndReturnItemDTO> {
+  canAddReturnItem(
+    item: ReturnItemDTO,
+  ): Observable<BatchResponseArgsOfReturnItemDTOAndReturnItemDTO> {
     return this._remiService.RemiCanAddReturnItem({
       data: [item],
     });
   }
 
-  async createReturn(supplierId: number, returnGroup?: string): Promise<ReturnDTO> {
+  async createReturn(
+    supplierId: number,
+    returnGroup?: string,
+  ): Promise<ReturnDTO> {
     const response = await this._returnService
       .ReturnCreateReturn({
         data: {
@@ -343,7 +369,10 @@ export class DomainRemissionService {
       .toPromise();
   }
 
-  getReturns(params: { start?: Date; returncompleted: boolean }): Observable<ReturnDTO[]> {
+  getReturns(params: {
+    start?: Date;
+    returncompleted: boolean;
+  }): Observable<ReturnDTO[]> {
     const queryToken: ReturnQueryTokenDTO = {
       start: params.start?.toISOString(),
       filter: {
@@ -360,13 +389,20 @@ export class DomainRemissionService {
     });
 
     return this.getCurrentStock().pipe(
-      switchMap((stock) => this._returnService.ReturnQueryReturns({ stockId: stock.id, queryToken })),
+      switchMap((stock) =>
+        this._returnService.ReturnQueryReturns({
+          stockId: stock.id,
+          queryToken,
+        }),
+      ),
       map((res) => res.result),
     );
   }
 
   getReturn(returnId: number): Observable<ReturnDTO> {
-    return this._returnService.ReturnGetReturn({ returnId, eagerLoading: 3 }).pipe(map((res) => res.result));
+    return this._returnService
+      .ReturnGetReturn({ returnId, eagerLoading: 3 })
+      .pipe(map((res) => res.result));
   }
 
   async deleteReturn(returnId: number) {
@@ -393,7 +429,11 @@ export class DomainRemissionService {
     inStock: number;
   }) {
     return this._returnService
-      .ReturnAddReturnItem({ returnId, receiptId, data: { returnItemId, quantity, placementType, inStock } })
+      .ReturnAddReturnItem({
+        returnId,
+        receiptId,
+        data: { returnItemId, quantity, placementType, inStock },
+      })
       .pipe(map((r) => r.result));
   }
 
@@ -420,7 +460,14 @@ export class DomainRemissionService {
       .ReturnAddReturnSuggestion({
         returnId,
         receiptId,
-        data: { returnSuggestionId, quantity, placementType, inStock, impedimentComment, remainingQuantity },
+        data: {
+          returnSuggestionId,
+          quantity,
+          placementType,
+          inStock,
+          impedimentComment,
+          remainingQuantity,
+        },
       })
       .pipe(map((r) => r.result));
   }
@@ -438,18 +485,28 @@ export class DomainRemissionService {
     receiptId: number;
     receiptItemId: number;
   }) {
-    return this._returnService.ReturnRemoveReturnItem({ returnId, receiptItemId, receiptId });
+    return this._returnService.ReturnRemoveReturnItem({
+      returnId,
+      receiptItemId,
+      receiptId,
+    });
   }
 
   returnImpediment(itemId: number) {
     return this._returnService
-      .ReturnReturnItemImpediment({ itemId, data: { comment: 'Produkt nicht gefunden' } })
+      .ReturnReturnItemImpediment({
+        itemId,
+        data: { comment: 'Produkt nicht gefunden' },
+      })
       .pipe(map((r) => r.result));
   }
 
   returnSuggestion(itemId: number) {
     return this._returnService
-      .ReturnReturnSuggestionImpediment({ itemId, data: { comment: 'Produkt nicht gefunden' } })
+      .ReturnReturnSuggestionImpediment({
+        itemId,
+        data: { comment: 'Produkt nicht gefunden' },
+      })
       .pipe(map((r) => r.result));
   }
 
@@ -459,7 +516,10 @@ export class DomainRemissionService {
    * @param receiptNumber Receipt number
    * @returns ReceiptDTO
    */
-  async createReceipt(returnDTO: ReturnDTO, receiptNumber?: string): Promise<ReceiptDTO> {
+  async createReceipt(
+    returnDTO: ReturnDTO,
+    receiptNumber?: string,
+  ): Promise<ReceiptDTO> {
     const stock = await this._getStock();
 
     const response = await this._returnService
@@ -510,7 +570,10 @@ export class DomainRemissionService {
     return receipt;
   }
 
-  async completeReceipt(returnId: number, receiptId: number): Promise<ReceiptDTO> {
+  async completeReceipt(
+    returnId: number,
+    receiptId: number,
+  ): Promise<ReceiptDTO> {
     const res = await this._returnService
       .ReturnFinalizeReceipt({
         returnId,

apps/isa-app/src/main.ts

@@ -1,21 +1,22 @@
-import { enableProdMode, isDevMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { CONFIG_DATA } from '@isa/core/config';
-import { setDefaultOptions } from 'date-fns';
-import { de } from 'date-fns/locale';
-import * as moment from 'moment';
+import { enableProdMode, isDevMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { CONFIG_DATA } from "@isa/core/config";
+import { setDefaultOptions } from "date-fns";
+import { de } from "date-fns/locale";
+import * as moment from "moment";
+import "moment/locale/de";
 
 setDefaultOptions({ locale: de });
-moment.locale('de');
+moment.locale("de");
 
-import { AppModule } from './app/app.module';
+import { AppModule } from "./app/app.module";
 
 if (!isDevMode()) {
   enableProdMode();
 }
 
 async function bootstrap() {
-  const configRes = await fetch('/config/config.json');
+  const configRes = await fetch("/config/config.json");
 
   const config = await configRes.json();
 

apps/isa-app/src/modal/address-selection/address-selection-modal.component.html

@@ -3,10 +3,12 @@
   <p>Vorschläge:</p>
 
   <ul class="content">
-    <li *ngFor="let item of ref?.data">
-      <span>{{ item.street }} {{ item.streetNumber }}, {{ item.zipCode }} {{ item.city }}</span>
-      <button (click)="ref.close(item)">Übernehmen</button>
-    </li>
+    @for (item of ref?.data; track item) {
+      <li>
+        <span>{{ item.street }} {{ item.streetNumber }}, {{ item.zipCode }} {{ item.city }}</span>
+        <button (click)="ref.close(item)">Übernehmen</button>
+      </li>
+    }
   </ul>
 
   <div class="center">

apps/isa-app/src/modal/availabilities/availabilities.component.html

@@ -6,13 +6,19 @@
     uiSearchboxSearchButton
     (click)="filter(input.value)"
     [disabled]="branchesFetching$ | async"
-  >
-    <ui-icon class="spin" *ngIf="branchesFetching$ | async" icon="spinner" size="32px"></ui-icon>
-    <ui-icon *ngIf="!(branchesFetching$ | async)" icon="search" size="24px"></ui-icon>
-  </button>
-  <button *ngIf="input.value" type="reset" uiSearchboxClearButton (click)="filter(''); cancelSearch(); input.value = ''">
-    <ui-icon icon="close" size="22px"></ui-icon>
+    >
+    @if (branchesFetching$ | async) {
+      <ui-icon class="spin" icon="spinner" size="32px"></ui-icon>
+    }
+    @if (!(branchesFetching$ | async)) {
+      <ui-icon icon="search" size="24px"></ui-icon>
+    }
   </button>
+  @if (input.value) {
+    <button type="reset" uiSearchboxClearButton (click)="filter(''); cancelSearch(); input.value = ''">
+      <ui-icon icon="close" size="22px"></ui-icon>
+    </button>
+  }
 </ui-searchbox>
 
 <p class="subtitle">
@@ -25,7 +31,7 @@
 <hr />
 
 <div class="branches">
-  <ng-container *ngFor="let branch of filteredBranches$ | async">
+  @for (branch of filteredBranches$ | async; track branch) {
     <div class="branch">
       <div class="branch-info">
         <span class="branch-name">
@@ -36,25 +42,23 @@
           {{ branch.address.city }}
         </span>
       </div>
-
       <div class="branch-actions">
-        <button
-          *ngIf="(branch.id | stockInfo: (inStock$ | async))?.availableQuantity > 0 && branch?.isShippingEnabled"
-          class="cta-reserve"
-          (click)="reserve(branch)"
-        >
-          Reservieren
-        </button>
-
+        @if ((branch.id | stockInfo: (inStock$ | async))?.availableQuantity > 0 && branch?.isShippingEnabled) {
+          <button
+            class="cta-reserve"
+            (click)="reserve(branch)"
+            >
+            Reservieren
+          </button>
+        }
         <ui-spinner [show]="stockFetching$ | async">
           <span class="branch-stock">
             <ui-icon icon="home" size="22px"></ui-icon>
-
             <span>{{ branch.id | inStock: (inStock$ | async) }}x</span>
           </span>
         </ui-spinner>
       </div>
     </div>
     <hr />
-  </ng-container>
+  }
 </div>

apps/isa-app/src/modal/images/images.component.html

@@ -3,9 +3,11 @@
 </div>
 
 <div class="thumbnails-wrapper">
-  <button *ngFor="let image of images" (click)="activeImage = image" [class.selected]="activeImage.url === image.url">
-    <img class="thumbnail" [src]="image.thumbUrl" />
-  </button>
+  @for (image of images; track image) {
+    <button (click)="activeImage = image" [class.selected]="activeImage.url === image.url">
+      <img class="thumbnail" [src]="image.thumbUrl" />
+    </button>
+  }
 </div>
 
 <div class="controls">

apps/isa-app/src/modal/kulturpass-order/kulturpass-order-item/kulturpass-order-item.component.html

@@ -18,9 +18,11 @@
       <ui-quantity-dropdown [quantity]="itemQuantity$ | async" (quantityChange)="onQuantityChange($event)"></ui-quantity-dropdown>
     </div>
     <div class="relative">
-      <div *ngIf="stockWarning$ | async" class="text-warning font-bold absolute right-0 top-0 whitespace-nowrap">
-        Es befinden sich {{ availableQuantity$ | async }} Exemplare in der Filiale
-      </div>
+      @if (stockWarning$ | async) {
+        <div class="text-warning font-bold absolute right-0 top-0 whitespace-nowrap">
+          Es befinden sich {{ availableQuantity$ | async }} Exemplare in der Filiale
+        </div>
+      }
     </div>
   </div>
 </div>

apps/isa-app/src/modal/kulturpass-order/kulturpass-order-modal.component.html

@@ -20,18 +20,21 @@
       </div>
     </div>
     <div class="overflow-y-auto -mx-4 scroll-bar">
-      <div *ngIf="emptyShoppingCart$ | async" class="h-full grid items-center justify-center">
-        <h3 class="text-xl font-bold text-center text-gray-500">
-          Warenkorb ist leer, bitte suchen oder scannen
-          <br />
-          Sie Artikel um den Warenkob zu füllen.
-        </h3>
-      </div>
-      <shared-kulturpass-order-item
-        class="border-b border-solid border-[#EFF1F5]"
-        *ngFor="let item of items$ | async; trackBy: trackItemById"
-        [item]="item"
-      ></shared-kulturpass-order-item>
+      @if (emptyShoppingCart$ | async) {
+        <div class="h-full grid items-center justify-center">
+          <h3 class="text-xl font-bold text-center text-gray-500">
+            Warenkorb ist leer, bitte suchen oder scannen
+            <br />
+            Sie Artikel um den Warenkob zu füllen.
+          </h3>
+        </div>
+      }
+      @for (item of items$ | async; track trackItemById($index, item)) {
+        <shared-kulturpass-order-item
+          class="border-b border-solid border-[#EFF1F5]"
+          [item]="item"
+        ></shared-kulturpass-order-item>
+      }
     </div>
     <div class="flex flex-row justify-evenly items-stretch border-t border-solid border-[#EFF1F5] py-3 px-4 -mx-4">
       <div class="grid grid-flow-row text-xl">
@@ -49,13 +52,15 @@
         </div>
       </div>
       <div class="grid items-end justify-between">
-        <div *ngIf="negativeBalance$ | async" class="text-xl text-warning font-bold text-center">Der Betrag übersteigt ihr Guthaben</div>
+        @if (negativeBalance$ | async) {
+          <div class="text-xl text-warning font-bold text-center">Der Betrag übersteigt ihr Guthaben</div>
+        }
         <button
           type="button"
           class="bg-brand text-white px-6 py-3 font-bold rounded-full disabled:bg-disabled-branch disabled:text-active-branch"
           [disabled]="orderButtonDisabled$ | async"
           (click)="order()"
-        >
+          >
           <shared-loader [loading]="ordering$ | async" hideContent="true">Kauf abschließen und Rechnung drucken</shared-loader>
         </button>
       </div>

apps/isa-app/src/modal/message/message-modal.component.html

@@ -2,19 +2,20 @@
   {{ message }}
 </p>
 <div class="message-modal-actions grid grid-flow-col gap-4 items-center justify-center">
-  <button
-    *ngFor="let action of actions"
-    type="button"
-    class="btn rounded-full font-bold text-p1 border-[2px] border-solid border-brand px-6"
-    [class.bg-brand]="action.primary"
-    [class.hover:bg-brand]="action.primary"
-    [class.text-white]="action.primary"
-    [class.bg-white]="!action.primary"
-    [class.text-brand]="!action.primary"
-    [class.hover:bg-white]="!action.primary"
-    [class.hover:text-brand]="!action.primary"
-    (click)="clickAction(action)"
-  >
-    {{ action.label }}
-  </button>
+  @for (action of actions; track action) {
+    <button
+      type="button"
+      class="btn rounded-full font-bold text-p1 border-[2px] border-solid border-brand px-6"
+      [class.bg-brand]="action.primary"
+      [class.hover:bg-brand]="action.primary"
+      [class.text-white]="action.primary"
+      [class.bg-white]="!action.primary"
+      [class.text-brand]="!action.primary"
+      [class.hover:bg-white]="!action.primary"
+      [class.hover:text-brand]="!action.primary"
+      (click)="clickAction(action)"
+      >
+      {{ action.label }}
+    </button>
+  }
 </div>

apps/isa-app/src/modal/message/message-modal.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { UiModalRef } from '@ui/modal';
 import { MessageModalData } from './message-modal.data';
@@ -10,7 +10,7 @@ import { MessageModalAction } from './message-modal.action';
   styleUrls: ['message-modal.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'shared-message-modal' },
-  imports: [CommonModule],
+  imports: [],
 })
 export class MessageModalComponent {
   get message() {

apps/isa-app/src/modal/notifications/notifications-list-item/notifications-list-item.component.html

@@ -4,8 +4,10 @@
     <div class="notification-text">{{ item.text }}</div>
   </div>
   <div>
-    <button *ngIf="editButton" class="notification-edit-cta text-brand font-bold text-lg px-4 py-3" (click)="itemSelected.emit(item)">
-      {{ editButtonLabel }}
-    </button>
+    @if (editButton) {
+      <button class="notification-edit-cta text-brand font-bold text-lg px-4 py-3" (click)="itemSelected.emit(item)">
+        {{ editButtonLabel }}
+      </button>
+    }
   </div>
 </div>

apps/isa-app/src/modal/notifications/notifications-package-inspection-group/notifications-package-inspection-group.component.html

@@ -1,5 +1,5 @@
 <div class="notification-list scroll-bar">
-  <ng-container *ngFor="let notification of notifications">
+  @for (notification of notifications; track notification) {
     <modal-notifications-list-item
       (click)="itemSelected(notification)"
       [editButtonLabel]="'Packstück-Prüfung'"
@@ -7,5 +7,5 @@
       (itemSelected)="itemSelected($event)"
     ></modal-notifications-list-item>
     <hr />
-  </ng-container>
+  }
 </div>

apps/isa-app/src/modal/notifications/notifications-remission-group/notifications-remission-group.component.html

@@ -1,8 +1,8 @@
 <div class="notification-list scroll-bar">
-  <ng-container *ngFor="let notification of notifications">
+  @for (notification of notifications; track notification) {
     <modal-notifications-list-item [item]="notification" (itemSelected)="itemSelected($event)"></modal-notifications-list-item>
     <hr />
-  </ng-container>
+  }
 </div>
 
 <div class="actions">

apps/isa-app/src/modal/notifications/notifications-reservation-group/notifications-reservation-group.component.html

@@ -1,8 +1,8 @@
 <div class="notification-list scroll-bar">
-  <ng-container *ngFor="let notification of notifications">
+  @for (notification of notifications; track notification) {
     <modal-notifications-list-item [item]="notification" (itemSelected)="itemSelected($event)"></modal-notifications-list-item>
     <hr />
-  </ng-container>
+  }
 </div>
 
 <div class="actions">

apps/isa-app/src/modal/notifications/notifications-task-calendar-group/notifications-task-calendar-group.component.html

@@ -1,8 +1,8 @@
 <div class="notification-list scroll-bar">
-  <ng-container *ngFor="let notification of notifications">
+  @for (notification of notifications; track notification) {
     <modal-notifications-list-item [item]="notification" (itemSelected)="itemSelected($event)"></modal-notifications-list-item>
     <hr />
-  </ng-container>
+  }
 </div>
 
 <div class="actions">

apps/isa-app/src/modal/notifications/notifications-update-group/notifications-update-group.component.html

@@ -1,11 +1,11 @@
 <div class="notification-list scroll-bar">
-  <ng-container *ngFor="let notification of notifications">
+  @for (notification of notifications; track notification) {
     <div class="notification-headline">
       <h1>{{ notification.headline }}</h1>
     </div>
     <div class="notification-text">{{ notification.text }}</div>
     <hr />
-  </ng-container>
+  }
 </div>
 
 <div class="actions">

apps/isa-app/src/modal/notifications/notifications.component.html

@@ -1,6 +1,6 @@
 <h1>Sie haben neue Nachrichten</h1>
 
-<ng-container *ngFor="let notification of notifications$ | async | keyvalue">
+@for (notification of notifications$ | async | keyvalue; track notification) {
   <button type="button" class="notification-card" (click)="selectArea(notification.key)">
     <div class="notification-icon">
       <div class="notification-counter">{{ notification.value?.length }}</div>
@@ -9,30 +9,37 @@
     <span>{{ notification.value?.[0]?.category }}</span>
   </button>
   <hr class="-mx-4" />
-  <ng-container *ngIf="notification.key === selectedArea" [ngSwitch]="notification.value?.[0]?.category">
-    <modal-notifications-update-group
-      *ngSwitchCase="'ISA-Update'"
-      [notifications]="notifications[selectedArea]"
-    ></modal-notifications-update-group>
-    <modal-notifications-reservation-group
-      *ngSwitchCase="'Reservierungsanfragen'"
-      [notifications]="notifications[selectedArea]"
-      (navigated)="close()"
-    ></modal-notifications-reservation-group>
-    <modal-notifications-remission-group
-      *ngSwitchCase="'Remission'"
-      [notifications]="notifications[selectedArea]"
-      (navigated)="close()"
-    ></modal-notifications-remission-group>
-    <modal-notifications-task-calendar-group
-      *ngSwitchCase="'Tätigkeitskalender'"
-      [notifications]="notifications[selectedArea]"
-      (navigated)="close()"
-    ></modal-notifications-task-calendar-group>
-    <modal-notifications-package-inspection-group
-      *ngSwitchCase="'Wareneingang Lagerware'"
-      [notifications]="notifications[selectedArea]"
-      (navigated)="close()"
-    ></modal-notifications-package-inspection-group>
-  </ng-container>
-</ng-container>
+  @if (notification.key === selectedArea) {
+    @switch (notification.value?.[0]?.category) {
+      @case ('ISA-Update') {
+        <modal-notifications-update-group
+          [notifications]="notifications[selectedArea]"
+        ></modal-notifications-update-group>
+      }
+      @case ('Reservierungsanfragen') {
+        <modal-notifications-reservation-group
+          [notifications]="notifications[selectedArea]"
+          (navigated)="close()"
+        ></modal-notifications-reservation-group>
+      }
+      @case ('Remission') {
+        <modal-notifications-remission-group
+          [notifications]="notifications[selectedArea]"
+          (navigated)="close()"
+        ></modal-notifications-remission-group>
+      }
+      @case ('Tätigkeitskalender') {
+        <modal-notifications-task-calendar-group
+          [notifications]="notifications[selectedArea]"
+          (navigated)="close()"
+        ></modal-notifications-task-calendar-group>
+      }
+      @case ('Wareneingang Lagerware') {
+        <modal-notifications-package-inspection-group
+          [notifications]="notifications[selectedArea]"
+          (navigated)="close()"
+        ></modal-notifications-package-inspection-group>
+      }
+    }
+  }
+}

apps/isa-app/src/modal/printer/modal-printer.component.html

@@ -2,13 +2,17 @@
   <div class="header">
     <h1>Wählen Sie einen Drucker aus</h1>
 
-    <span *ngIf="error" class="error-message">{{ errorMessage }}</span>
+    @if (error) {
+      <span class="error-message">{{ errorMessage }}</span>
+    }
   </div>
 
   <div class="body">
     <ui-spinner [show]="!loaded">
       <ui-select class="select" [(ngModel)]="selectedPrinterKey">
-        <ui-select-option *ngFor="let printer of printers$ | async" [label]="printer.description" [value]="printer.key"></ui-select-option>
+        @for (printer of printers$ | async; track printer) {
+          <ui-select-option [label]="printer.description" [value]="printer.key"></ui-select-option>
+        }
       </ui-select>
     </ui-spinner>
   </div>

apps/isa-app/src/modal/purchase-options/purchase-options-list-header/purchase-options-list-header.component.html

@@ -1,5 +1,9 @@
 <div class="flex flex-col text-right" [class.hidden]="hideHeader$ | async">
-  <button type="button" class="font-bold text-[#0556B4]" *ngIf="selectButton$ | async" (click)="selectAll()">Alle auswählen</button>
-  <button type="button" class="font-bold text-[#0556B4]" *ngIf="unselectButton$ | async" (click)="unselectAll()">Alle abwählen</button>
+  @if (selectButton$ | async) {
+    <button type="button" class="font-bold text-[#0556B4]" (click)="selectAll()">Alle auswählen</button>
+  }
+  @if (unselectButton$ | async) {
+    <button type="button" class="font-bold text-[#0556B4]" (click)="unselectAll()">Alle abwählen</button>
+  }
   <span class="mt-2">{{ selectedItemsCount$ | async }} von {{ itemsCount$ | async }} Artikel</span>
 </div>

apps/isa-app/src/modal/purchase-options/purchase-options-list-item/purchase-options-list-item.component.html

@@ -15,147 +15,171 @@
     </div>
     <div class="shared-purchase-options-list-item__manufacturer-and-ean">
       {{ product?.manufacturer }}
-      <span *ngIf="product?.manufacturer && product?.ean">|</span>
+      @if (product?.manufacturer && product?.ean) {
+        <span>|</span>
+      }
       {{ product?.ean }}
     </div>
     <div class="shared-purchase-options-list-item__volume-and-publication-date">
       {{ product?.volume }}
-      <span *ngIf="product?.volume && product?.publicationDate">|</span>
+      @if (product?.volume && product?.publicationDate) {
+        <span>|</span>
+      }
       {{ product?.publicationDate | date: 'dd. MMMM yyyy' }}
     </div>
     <div class="shared-purchase-options-list-item__availabilities mt-3 grid grid-flow-row gap-2 justify-start">
-      <div class="whitespace-nowrap self-center" *ngIf="(availabilities$ | async)?.length">Verfügbar als</div>
-      <div *ngFor="let availability of availabilities$ | async" class="grid grid-flow-col gap-4 justify-start">
-        <div
-          [ngSwitch]="availability.purchaseOption"
-          class="shared-purchase-options-list-item__availability grid grid-flow-col gap-2 items-center"
-          [attr.data-option]="availability.purchaseOption"
-        >
-          <ng-container *ngSwitchCase="'delivery'">
-            <shared-icon icon="isa-truck" [size]="22"></shared-icon>
-            {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
-            -
-            {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
-          </ng-container>
-          <ng-container *ngSwitchCase="'dig-delivery'">
-            <shared-icon icon="isa-truck" [size]="22"></shared-icon>
-            {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
-            -
-            {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
-          </ng-container>
-          <ng-container *ngSwitchCase="'b2b-delivery'">
-            <shared-icon icon="isa-b2b-truck" [size]="24"></shared-icon>
-            {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
-          </ng-container>
-          <ng-container *ngSwitchCase="'pickup'">
-            <shared-icon
-              class="cursor-pointer"
-              #uiOverlayTrigger="uiOverlayTrigger"
-              [uiOverlayTrigger]="orderDeadlineTooltip"
-              [class.tooltip-active]="uiOverlayTrigger.opened"
-              icon="isa-box-out"
-              [size]="18"
-            ></shared-icon>
-            {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
-            <ui-tooltip
-              #orderDeadlineTooltip
-              yPosition="above"
-              xPosition="after"
-              [yOffset]="-12"
-              [xOffset]="4"
-              [warning]="true"
-              [closeable]="true"
+      @if ((availabilities$ | async)?.length) {
+        <div class="whitespace-nowrap self-center">Verfügbar als</div>
+      }
+      @for (availability of availabilities$ | async; track availability) {
+        <div class="grid grid-flow-col gap-4 justify-start">
+          <div
+            class="shared-purchase-options-list-item__availability grid grid-flow-col gap-2 items-center"
+            [attr.data-option]="availability.purchaseOption"
             >
-              <b>{{ availability.data?.orderDeadline | orderDeadline }}</b>
-            </ui-tooltip>
-          </ng-container>
-          <ng-container *ngSwitchCase="'in-store'">
-            <shared-icon icon="isa-shopping-bag" [size]="18"></shared-icon>
-            {{ availability.data.inStock }}x
-            <ng-container *ngIf="isEVT; else noEVT">ab {{ isEVT | date: 'dd. MMMM yyyy' }}</ng-container>
-            <ng-template #noEVT>ab sofort</ng-template>
-          </ng-container>
-          <ng-container *ngSwitchCase="'download'">
-            <shared-icon icon="isa-download" [size]="22"></shared-icon>
-            Download
-          </ng-container>
+            @switch (availability.purchaseOption) {
+              @case ('delivery') {
+                <shared-icon icon="isa-truck" [size]="22"></shared-icon>
+                {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
+                -
+                {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
+              }
+              @case ('dig-delivery') {
+                <shared-icon icon="isa-truck" [size]="22"></shared-icon>
+                {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
+                -
+                {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
+              }
+              @case ('b2b-delivery') {
+                <shared-icon icon="isa-b2b-truck" [size]="24"></shared-icon>
+                {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
+              }
+              @case ('pickup') {
+                <shared-icon
+                  class="cursor-pointer"
+                  #uiOverlayTrigger="uiOverlayTrigger"
+                  [uiOverlayTrigger]="orderDeadlineTooltip"
+                  [class.tooltip-active]="uiOverlayTrigger.opened"
+                  icon="isa-box-out"
+                  [size]="18"
+                ></shared-icon>
+                {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
+                <ui-tooltip
+                  #orderDeadlineTooltip
+                  yPosition="above"
+                  xPosition="after"
+                  [yOffset]="-12"
+                  [xOffset]="4"
+                  [warning]="true"
+                  [closeable]="true"
+                  >
+                  <b>{{ availability.data?.orderDeadline | orderDeadline }}</b>
+                </ui-tooltip>
+              }
+              @case ('in-store') {
+                <shared-icon icon="isa-shopping-bag" [size]="18"></shared-icon>
+                {{ availability.data.inStock }}x
+                @if (isEVT) {
+                  ab {{ isEVT | date: 'dd. MMMM yyyy' }}
+                } @else {
+                  ab sofort
+                }
+              }
+              @case ('download') {
+                <shared-icon icon="isa-download" [size]="22"></shared-icon>
+                Download
+              }
+            }
+          </div>
         </div>
-      </div>
+      }
     </div>
   </div>
   <div class="shared-purchase-options-list-item__price text-right ml-4 flex flex-col items-end">
     <div class="shared-purchase-options-list-item__price-value font-bold text-xl flex flex-row items-center">
       <div class="relative flex flex-row justify-end items-start">
-        <ui-select
-          *ngIf="canEditVat$ | async"
-          class="w-[6.5rem] min-h-[3.4375rem] p-4 rounded-card border border-solid border-[#AEB7C1] mr-4"
-          tabindex="-1"
-          [formControl]="manualVatFormControl"
-          [defaultLabel]="'MwSt'"
-        >
-          <ui-select-option *ngFor="let vat of vats$ | async" [label]="vat.name + '%'" [value]="vat.vatType"></ui-select-option>
-        </ui-select>
-        <shared-input-control
-          [class.ml-6]="priceFormControl?.invalid && priceFormControl?.dirty"
-          *ngIf="canEditPrice$ | async; else priceTmpl"
-        >
-          <shared-input-control-indicator>
-            <shared-icon *ngIf="priceFormControl?.invalid && priceFormControl?.dirty" icon="mat-info"></shared-icon>
-          </shared-input-control-indicator>
-          <input
-            [uiOverlayTrigger]="giftCardTooltip"
-            triggerOn="none"
-            #quantityInput
-            #priceOverlayTrigger="uiOverlayTrigger"
-            sharedInputControlInput
-            type="string"
-            class="w-24"
-            [formControl]="priceFormControl"
-            placeholder="00,00"
-            (sharedOnInit)="onPriceInputInit(quantityInput, priceOverlayTrigger)"
-            sharedNumberValue
-          />
-          <shared-input-control-suffix>EUR</shared-input-control-suffix>
-          <shared-input-control-error error="required">Preis ist ungültig</shared-input-control-error>
-          <shared-input-control-error error="pattern">Preis ist ungültig</shared-input-control-error>
-          <shared-input-control-error error="min">Preis ist ungültig</shared-input-control-error>
-          <shared-input-control-error error="max">Preis ist ungültig</shared-input-control-error>
-        </shared-input-control>
+        @if (canEditVat$ | async) {
+          <ui-select
+            class="w-[6.5rem] min-h-[3.4375rem] p-4 rounded-card border border-solid border-[#AEB7C1] mr-4"
+            tabindex="-1"
+            [formControl]="manualVatFormControl"
+            [defaultLabel]="'MwSt'"
+            >
+            @for (vat of vats$ | async; track vat) {
+              <ui-select-option [label]="vat.name + '%'" [value]="vat.vatType"></ui-select-option>
+            }
+          </ui-select>
+        }
+        @if (canEditPrice$ | async) {
+          <shared-input-control
+            [class.ml-6]="priceFormControl?.invalid && priceFormControl?.dirty"
+            >
+            <shared-input-control-indicator>
+              @if (priceFormControl?.invalid && priceFormControl?.dirty) {
+                <shared-icon icon="mat-info"></shared-icon>
+              }
+            </shared-input-control-indicator>
+            <input
+              [uiOverlayTrigger]="giftCardTooltip"
+              triggerOn="none"
+              #quantityInput
+              #priceOverlayTrigger="uiOverlayTrigger"
+              sharedInputControlInput
+              type="string"
+              class="w-24"
+              [formControl]="priceFormControl"
+              placeholder="00,00"
+              (sharedOnInit)="onPriceInputInit(quantityInput, priceOverlayTrigger)"
+              sharedNumberValue
+              />
+              <shared-input-control-suffix>EUR</shared-input-control-suffix>
+              <shared-input-control-error error="required">Preis ist ungültig</shared-input-control-error>
+              <shared-input-control-error error="pattern">Preis ist ungültig</shared-input-control-error>
+              <shared-input-control-error error="min">Preis ist ungültig</shared-input-control-error>
+              <shared-input-control-error error="max">Preis ist ungültig</shared-input-control-error>
+            </shared-input-control>
+          } @else {
+            {{ priceValue$ | async | currency: 'EUR' : 'code' }}
+          }
 
-        <ui-tooltip [warning]="true" xPosition="after" yPosition="below" [xOffset]="-55" [yOffset]="18" [closeable]="true" #giftCardTooltip>
-          Tragen Sie hier den
-          <br />
-          Gutscheinbetrag ein.
-        </ui-tooltip>
+          <ui-tooltip [warning]="true" xPosition="after" yPosition="below" [xOffset]="-55" [yOffset]="18" [closeable]="true" #giftCardTooltip>
+            Tragen Sie hier den
+            <br />
+            Gutscheinbetrag ein.
+          </ui-tooltip>
+        </div>
+      </div>
+      <ui-quantity-dropdown class="mt-2" [formControl]="quantityFormControl" [range]="maxSelectableQuantity$ | async"></ui-quantity-dropdown>
+      <div class="pt-7">
+        @if ((canAddResult$ | async)?.canAdd) {
+          <input
+            class="fancy-checkbox"
+            [class.checked]="selectedFormControl?.value"
+            [formControl]="selectedFormControl"
+            type="checkbox"
+            />
+        }
       </div>
-      <ng-template #priceTmpl>
-        {{ priceValue$ | async | currency: 'EUR' : 'code' }}
-      </ng-template>
-    </div>
-    <ui-quantity-dropdown class="mt-2" [formControl]="quantityFormControl" [range]="maxSelectableQuantity$ | async"></ui-quantity-dropdown>
-    <div class="pt-7">
-      <input
-        *ngIf="(canAddResult$ | async)?.canAdd"
-        class="fancy-checkbox"
-        [class.checked]="selectedFormControl?.value"
-        [formControl]="selectedFormControl"
-        type="checkbox"
-      />
-    </div>
 
-    <ng-container *ngIf="canAddResult$ | async; let canAddResult">
-      <span *ngIf="!canAddResult.canAdd" class="inline-block font-bold text-[#BE8100] mt-[14px] max-w-[19rem]">
-        {{ canAddResult.message }}
-      </span>
-    </ng-container>
+      @if (canAddResult$ | async; as canAddResult) {
+        @if (!canAddResult.canAdd) {
+          <span class="inline-block font-bold text-[#BE8100] mt-[14px] max-w-[19rem]">
+            {{ canAddResult.message }}
+          </span>
+        }
+      }
 
-    <span *ngIf="showMaxAvailableQuantity$ | async" class="font-bold text-[#BE8100] mt-[14px]">
-      {{ (availability$ | async)?.inStock }} Exemplare sofort lieferbar
-    </span>
-    <span *ngIf="showNotAvailable$ | async" class="font-bold text-[#BE8100] mt-[14px]">Derzeit nicht bestellbar</span>
+      @if (showMaxAvailableQuantity$ | async) {
+        <span class="font-bold text-[#BE8100] mt-[14px]">
+          {{ (availability$ | async)?.inStock }} Exemplare sofort lieferbar
+        </span>
+      }
+      @if (showNotAvailable$ | async) {
+        <span class="font-bold text-[#BE8100] mt-[14px]">Derzeit nicht bestellbar</span>
+      }
+    </div>
+  </div>
+  <div class="flex flex-row">
+    <div class="w-16"></div>
+    <div class="grow shared-purchase-options-list-item__availabilities"></div>
   </div>
-</div>
-<div class="flex flex-row">
-  <div class="w-16"></div>
-  <div class="grow shared-purchase-options-list-item__availabilities"></div>
-</div>

apps/isa-app/src/modal/purchase-options/purchase-options-modal.component.html

@@ -1,28 +1,37 @@
 <h3 class="text-center font-bold text-h3">Lieferung auswählen</h3>
 <p class="text-center font-2xl mt-4">Wie möchten Sie die Artikel erhalten?</p>
 <div class="rounded p-4 shadow-card mt-4 grid grid-flow-col gap-4 justify-center items-center relative">
-  <ng-container *ngIf="!(isDownloadOnly$ | async)">
-    <ng-container *ngIf="!(isGiftCardOnly$ | async)">
-      <app-in-store-purchase-options-tile *ngIf="showOption('in-store')"></app-in-store-purchase-options-tile>
-      <app-pickup-purchase-options-tile *ngIf="showOption('pickup')"></app-pickup-purchase-options-tile>
-    </ng-container>
-    <app-delivery-purchase-options-tile *ngIf="showOption('delivery')"></app-delivery-purchase-options-tile>
-  </ng-container>
+  @if (!(isDownloadOnly$ | async)) {
+    @if (!(isGiftCardOnly$ | async)) {
+      @if (showOption('in-store')) {
+        <app-in-store-purchase-options-tile></app-in-store-purchase-options-tile>
+      }
+      @if (showOption('pickup')) {
+        <app-pickup-purchase-options-tile></app-pickup-purchase-options-tile>
+      }
+    }
+    @if (showOption('delivery')) {
+      <app-delivery-purchase-options-tile></app-delivery-purchase-options-tile>
+    }
+  }
 
-  <ng-container *ngIf="hasDownload$ | async">
-    <app-download-purchase-options-tile *ngIf="showOption('download')"></app-download-purchase-options-tile>
-  </ng-container>
+  @if (hasDownload$ | async) {
+    @if (showOption('download')) {
+      <app-download-purchase-options-tile></app-download-purchase-options-tile>
+    }
+  }
 </div>
 <shared-purchase-options-list-header></shared-purchase-options-list-header>
 <div class="shared-purchase-options-modal__items -mx-4">
-  <shared-purchase-options-list-item
-    class="border-t border-gray-200 p-4 border-solid"
-    *ngFor="let item of items$ | async; trackBy: itemTrackBy"
-    [item]="item"
-  ></shared-purchase-options-list-item>
+  @for (item of items$ | async; track itemTrackBy($index, item)) {
+    <shared-purchase-options-list-item
+      class="border-t border-gray-200 p-4 border-solid"
+      [item]="item"
+    ></shared-purchase-options-list-item>
+  }
 </div>
 <div class="text-center -mx-4 border-t border-gray-200 p-4 border-solid">
-  <ng-container *ngIf="type === 'add'">
+  @if (type === 'add') {
     <button type="button" class="isa-cta-button" [disabled]="!(canContinue$ | async) || saving" (click)="save('continue-shopping')">
       Weiter einkaufen
     </button>
@@ -31,18 +40,18 @@
       class="ml-4 isa-cta-button isa-button-primary"
       [disabled]="!(canContinue$ | async) || saving"
       (click)="save('continue')"
-    >
+      >
       Fortfahren
     </button>
-  </ng-container>
-  <ng-container *ngIf="type === 'update'">
+  }
+  @if (type === 'update') {
     <button
       type="button"
       class="ml-4 isa-cta-button isa-button-primary"
       [disabled]="!(canContinue$ | async) || saving"
       (click)="save('continue')"
-    >
+      >
       Fortfahren
     </button>
-  </ng-container>
+  }
 </div>

apps/isa-app/src/modal/purchase-options/purchase-options-tile/download-purchase-options-tile.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
@@ -9,7 +9,7 @@ import { IconComponent } from '@shared/components/icon';
   templateUrl: 'download-purchase-options-tile.component.html',
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, IconComponent],
+  imports: [IconComponent],
 })
 export class DownloadPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
   constructor(

apps/isa-app/src/modal/reorder/reorder.component.html

@@ -2,30 +2,31 @@
 
 <hr />
 
-<ng-container *ngIf="orderItem$ | async; let orderItem">
+@if (orderItem$ | async; as orderItem) {
   <div class="header">
-    <img
-      class="thumbnail"
-      loading="lazy"
-      *ngIf="orderItem?.product?.ean | productImage; let productImage"
-      [src]="productImage"
-      [alt]="orderItem?.product?.name"
-    />
-
+    @if (orderItem?.product?.ean | productImage; as productImage) {
+      <img
+        class="thumbnail"
+        loading="lazy"
+        [src]="productImage"
+        [alt]="orderItem?.product?.name"
+        />
+    }
     <div class="details">
       <div class="product-name">{{ orderItem.product?.name }}</div>
-      <div *ngIf="orderItem.product?.format && orderItem.product.formatDetail" class="product-format">
-        <img class="format-icon" [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'" alt="format icon" />
-        {{ orderItem.product.formatDetail }}
-      </div>
+      @if (orderItem.product?.format && orderItem.product.formatDetail) {
+        <div class="product-format">
+          <img class="format-icon" [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'" alt="format icon" />
+          {{ orderItem.product.formatDetail }}
+        </div>
+      }
       <div class="product-ean">
         {{ orderItem.product?.ean }}
       </div>
       <div class="quantity">{{ orderItem.quantity }}x</div>
     </div>
   </div>
-
-  <ng-container *ngIf="availabilities$ | async; let availabilities; else: showLoadingSpinner">
+  @if (availabilities$ | async; as availabilities) {
     <div class="supplier-grid">
       <span></span>
       <span class="number">Bestand</span>
@@ -34,53 +35,56 @@
       <span>vsl. Lieferdatum</span>
       <span class="number">Preis</span>
       <span></span>
-
-      <ng-container *ngFor="let availability of availabilities; let i = index">
-        <ng-container *ngIf="availability">
+      @for (availability of availabilities; track availability; let i = $index) {
+        @if (availability) {
           <span class="first-cell">{{ availability.supplier | supplierName }}</span>
           <span class="number">{{ availability.qty || 0 }}</span>
           <span>{{ availability.ssc }}</span>
           <span>
-            <ui-checkbox *ngIf="availability.supplier !== 'F'" [(ngModel)]="availability.isPrebooked"></ui-checkbox>
+            @if (availability.supplier !== 'F') {
+              <ui-checkbox [(ngModel)]="availability.isPrebooked"></ui-checkbox>
+            }
           </span>
           <span>{{ availability.at | date: 'dd.MM.yy' }}</span>
           <span class="number">{{ availability.price?.value?.value | currency: 'EUR' : 'code' }}</span>
           <span>
-            <ui-select-bullet
-              *ngIf="availability.supplier !== 'F' || availability.qty > 0"
-              [(ngModel)]="checkedSupplier"
-              [value]="availability.supplier"
-              (ngModelChange)="checked($event, availability)"
-            ></ui-select-bullet>
+            @if (availability.supplier !== 'F' || availability.qty > 0) {
+              <ui-select-bullet
+                [(ngModel)]="checkedSupplier"
+                [value]="availability.supplier"
+                (ngModelChange)="checked($event, availability)"
+              ></ui-select-bullet>
+            }
           </span>
-        </ng-container>
-      </ng-container>
+        }
+      }
     </div>
-
-    <ng-container *ngIf="storeAvailabilityError$ | async">
+    @if (storeAvailabilityError$ | async) {
       <div class="availability-error">Lieferantenbestand nicht verfügbar</div>
       <hr />
-    </ng-container>
-
-    <ng-container *ngIf="takeAwayAvailabilityError$ | async">
+    }
+    @if (takeAwayAvailabilityError$ | async) {
       <div class="availability-error">Filialbestand nicht verfügbar</div>
       <hr />
-    </ng-container>
-
-    <div class="reason" *ngIf="showReasons$ | async">
-      <button class="reason-dropdown" [uiOverlayTrigger]="statusDropdown" #dropdown="uiOverlayTrigger">
-        {{ selectedReason || 'Warum wird nachbestellt?' }}
-        <ui-icon [rotate]="dropdown.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-icon>
-      </button>
-      <ui-dropdown #statusDropdown yPosition="above" xPosition="after" [xOffset]="8">
-        <button uiDropdownItem *ngFor="let reason of reorderReasons$ | async" (click)="selectedReason = reason.value; dropdown.close()">
-          {{ reason.value }}
+    }
+    @if (showReasons$ | async) {
+      <div class="reason">
+        <button class="reason-dropdown" [uiOverlayTrigger]="statusDropdown" #dropdown="uiOverlayTrigger">
+          {{ selectedReason || 'Warum wird nachbestellt?' }}
+          <ui-icon [rotate]="dropdown.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-icon>
         </button>
-      </ui-dropdown>
-
-      <span *ngIf="showReasonError$ | async" class="error">Bitte wählen Sie einen Grund für das nachbestellen</span>
-    </div>
-
+        <ui-dropdown #statusDropdown yPosition="above" xPosition="after" [xOffset]="8">
+          @for (reason of reorderReasons$ | async; track reason) {
+            <button uiDropdownItem (click)="selectedReason = reason.value; dropdown.close()">
+              {{ reason.value }}
+            </button>
+          }
+        </ui-dropdown>
+        @if (showReasonError$ | async) {
+          <span class="error">Bitte wählen Sie einen Grund für das nachbestellen</span>
+        }
+      </div>
+    }
     <div class="actions">
       <button class="cta-not-available cta-action-secondary" [disabled]="ctaDisabled$ | async" (click)="notAvailable()">
         <ui-spinner [show]="ctaDisabled$ | async">Nicht lieferbar</ui-spinner>
@@ -89,9 +93,7 @@
         <ui-spinner [show]="ctaDisabled$ | async">Bestellen</ui-spinner>
       </button>
     </div>
-  </ng-container>
-
-  <ng-template #showLoadingSpinner>
+  } @else {
     <ui-spinner class="load-spinner" [show]="true"></ui-spinner>
-  </ng-template>
-</ng-container>
+  }
+}

apps/isa-app/src/modal/reviews/reviews.component.html

@@ -5,7 +5,7 @@
 
 <div class="reviews">
   <hr />
-  <ng-container *ngFor="let review of reviews">
+  @for (review of reviews; track review) {
     <div class="review">
       <div class="row">
         <ui-stars [rating]="review.rating"></ui-stars>
@@ -16,21 +16,29 @@
       </div>
       <div class="row">
         <span>
-          <span class="text" *ngIf="expandIds.indexOf(review.id) === -1">{{ review.text | substr: 150 }}</span>
-          <span class="text" *ngIf="expandIds.indexOf(review.id) > -1">{{ review.text }}</span>
+          @if (expandIds.indexOf(review.id) === -1) {
+            <span class="text">{{ review.text | substr: 150 }}</span>
+          }
+          @if (expandIds.indexOf(review.id) > -1) {
+            <span class="text">{{ review.text }}</span>
+          }
         </span>
       </div>
       <div class="row right">
-        <button *ngIf="expandIds.indexOf(review.id) === -1" class="btn-expand" (click)="expand(review.id)">
-          Mehr
-          <ui-icon icon="arrow"></ui-icon>
-        </button>
-        <button *ngIf="expandIds.indexOf(review.id) > -1" class="btn-collapse" (click)="expand(review.id)">
-          <ui-icon icon="arrow" rotate="180deg"></ui-icon>
-          Weniger
-        </button>
+        @if (expandIds.indexOf(review.id) === -1) {
+          <button class="btn-expand" (click)="expand(review.id)">
+            Mehr
+            <ui-icon icon="arrow"></ui-icon>
+          </button>
+        }
+        @if (expandIds.indexOf(review.id) > -1) {
+          <button class="btn-collapse" (click)="expand(review.id)">
+            <ui-icon icon="arrow" rotate="180deg"></ui-icon>
+            Weniger
+          </button>
+        }
       </div>
     </div>
     <hr />
-  </ng-container>
+  }
 </div>

apps/isa-app/src/page/assortment/price-update/price-update-list/price-update-item.component.html

@@ -1,6 +1,6 @@
 <div
   class="page-price-update-item__item-header flex flex-row w-full items-center justify-between bg-[rgba(0,128,121,0.15)] mb-px-2 px-5 h-[53px] rounded-t"
->
+  >
   <p class="page-price-update-item__item-instruction font-bold text-lg">{{ item?.task?.instruction }}</p>
   <p class="page-price-update-item__item-due-date text-p2">
     gültig ab
@@ -10,13 +10,14 @@
 
 <div class="page-price-update-item__item-card p-5 bg-white">
   <div class="page-price-update-item__item-thumbnail text-center mr-4 w-[47px] h-[73px]">
-    <img
-      class="page-price-update-item__item-image w-[47px] max-h-[73px]"
-      loading="lazy"
-      *ngIf="item?.product?.ean | productImage; let productImage"
-      [src]="productImage"
-      [alt]="item?.product?.name"
-    />
+    @if (item?.product?.ean | productImage; as productImage) {
+      <img
+        class="page-price-update-item__item-image w-[47px] max-h-[73px]"
+        loading="lazy"
+        [src]="productImage"
+        [alt]="item?.product?.name"
+        />
+    }
   </div>
 
   <div class="page-price-update-item__item-details">
@@ -31,28 +32,33 @@
       [class.text-md]="item?.product?.name?.length >= 50"
       [class.text-p3]="item?.product?.name?.length >= 60"
       [class.text-xs]="item?.product?.name?.length >= 100"
-    >
+      >
       {{ item?.product?.name }}
     </div>
 
     <div class="page-price-update-item__item-format">
-      <div *ngIf="item?.product?.format && item?.product?.formatDetail" class="font-bold flex flex-row">
-        <img
-          class="mr-3"
-          *ngIf="item?.product?.format !== '--'"
-          loading="lazy"
-          src="assets/images/Icon_{{ item?.product?.format }}.svg"
-          [alt]="item?.product?.formatDetail"
-        />
-        {{ environment.isTablet() ? (item?.product?.formatDetail | substr: 25) : item?.product?.formatDetail }}
-      </div>
+      @if (item?.product?.format && item?.product?.formatDetail) {
+        <div class="font-bold flex flex-row">
+          @if (item?.product?.format !== '--') {
+            <img
+              class="mr-3"
+              loading="lazy"
+              src="assets/images/Icon_{{ item?.product?.format }}.svg"
+              [alt]="item?.product?.formatDetail"
+              />
+          }
+          {{ environment.isTablet() ? (item?.product?.formatDetail | substr: 25) : item?.product?.formatDetail }}
+        </div>
+      }
     </div>
 
     <div class="page-price-update-item__item-misc">
       {{ environment.isTablet() ? (item?.product?.manufacturer | substr: 18) : item?.product?.manufacturer }} | {{ item?.product?.ean }}
       <br />
       {{ item?.product?.volume }}
-      <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
+      @if (item?.product?.volume && item?.product?.publicationDate) {
+        <span>|</span>
+      }
       {{ publicationDate }}
     </div>
   </div>
@@ -69,18 +75,21 @@
     </div>
 
     <div class="page-price-update-item__item-select-bullet">
-      <input *ngIf="isSelectable" [ngModel]="selected" (ngModelChange)="setSelected()" class="isa-select-bullet" type="checkbox" />
+      @if (isSelectable) {
+        <input [ngModel]="selected" (ngModelChange)="setSelected()" class="isa-select-bullet" type="checkbox" />
+      }
     </div>
 
     <div class="page-price-update-item__item-stock flex flex-row font-bold">
       <ui-icon class="mt-px-2 mr-1" icon="home" size="1em"></ui-icon>
-      <span
-        *ngIf="inStock$ | async; let stock"
-        [class.skeleton]="stock?.inStock === undefined"
-        class="min-w-[1rem] text-right inline-block"
-      >
-        {{ stock?.inStock }}
-      </span>
+      @if (inStock$ | async; as stock) {
+        <span
+          [class.skeleton]="stock?.inStock === undefined"
+          class="min-w-[1rem] text-right inline-block"
+          >
+          {{ stock?.inStock }}
+        </span>
+      }
       x
     </div>
   </div>

apps/isa-app/src/page/assortment/price-update/price-update-list/price-update-list.component.html

@@ -4,20 +4,26 @@
     (click)="print()"
     type="button"
     class="page-price-update-list__print-cta text-lg font-bold text-[#F70400] pr-5 mb-3"
-  >
+    >
     Drucken
   </button>
   <div class="flex flex-row items-center justify-end">
-    <div *ngIf="getSelectableItems().length > 0" class="text-[#0556B4] font-bold text-p3 mr-5">
-      <ng-container *ngIf="selectedItemUids$ | async; let selectedItems">
-        <button class="page-price-update-list__cta-unselect-all" *ngIf="selectedItems?.length > 0" type="button" (click)="unselectAll()">
-          Alle entfernen ({{ selectedItems?.length }})
-        </button>
-        <button class="page-price-update-list__cta-select-all" type="button" (click)="selectAll()" *ngIf="selectedItems?.length === 0">
-          Alle auswählen ({{ getSelectableItems().length }})
-        </button>
-      </ng-container>
-    </div>
+    @if (getSelectableItems().length > 0) {
+      <div class="text-[#0556B4] font-bold text-p3 mr-5">
+        @if (selectedItemUids$ | async; as selectedItems) {
+          @if (selectedItems?.length > 0) {
+            <button class="page-price-update-list__cta-unselect-all" type="button" (click)="unselectAll()">
+              Alle entfernen ({{ selectedItems?.length }})
+            </button>
+          }
+          @if (selectedItems?.length === 0) {
+            <button class="page-price-update-list__cta-select-all" type="button" (click)="selectAll()">
+              Alle auswählen ({{ getSelectableItems().length }})
+            </button>
+          }
+        }
+      </div>
+    }
     <div class="page-price-update-list__items-count inline-flex flex-row items-center pr-5 text-p3">
       {{ items?.length ?? 0 }}
       Titel
@@ -32,38 +38,41 @@
 <div class="items scroll-bar">
   @for (item of items; track item.uId; let first = $first) {
     @defer (on viewport) {
-      <page-price-update-item [item]="item" [selected]="isSelected(item)" [class.mt-px-10]="!first"></page-price-update-item>
+    <page-price-update-item [item]="item" [selected]="isSelected(item)" [class.mt-px-10]="!first"></page-price-update-item>
     } @placeholder {
-      <page-price-update-item-loader></page-price-update-item-loader>
-    }
+    <page-price-update-item-loader></page-price-update-item-loader>
   }
+}
 
-  <page-price-update-item-loader *ngIf="fetching"></page-price-update-item-loader>
-  <div class="h-28"></div>
+@if (fetching) {
+  <page-price-update-item-loader></page-price-update-item-loader>
+}
+<div class="h-28"></div>
 </div>
 
 <!-- <cdk-virtual-scroll-viewport #scrollContainer [itemSize]="267" minBufferPx="1200" maxBufferPx="1200" class="scroll-bar">
-  <page-price-update-item
-    *cdkVirtualFor="let item of items; let first; trackBy: trackByFn"
-    [item]="item"
-    [selected]="isSelected(item)"
-    [class.mt-px-10]="!first"
-  ></page-price-update-item>
+<page-price-update-item
+  *cdkVirtualFor="let item of items; let first; trackBy: trackByFn"
+  [item]="item"
+  [selected]="isSelected(item)"
+  [class.mt-px-10]="!first"
+></page-price-update-item>
 
-  <page-price-update-item-loader *ngIf="fetching"> </page-price-update-item-loader>
+<page-price-update-item-loader *ngIf="fetching"> </page-price-update-item-loader>
 
-  <div class="h-28"></div>
+<div class="h-28"></div>
 </cdk-virtual-scroll-viewport> -->
 
 <div class="page-price-update-list__action-wrapper">
-  <button
-    [@cta]
-    *ngIf="!fetching"
-    [disabled]="(selectedItemUids$ | async).length === 0 || (loading$ | async)"
-    class="page-price-update-list__complete-items isa-button isa-cta-button isa-button-primary px-11"
-    type="button"
-    (click)="onComplete()"
-  >
-    <ui-spinner [show]="loading$ | async">Erledigt</ui-spinner>
-  </button>
+  @if (!fetching) {
+    <button
+      [@cta]
+      [disabled]="(selectedItemUids$ | async).length === 0 || (loading$ | async)"
+      class="page-price-update-list__complete-items isa-button isa-cta-button isa-button-primary px-11"
+      type="button"
+      (click)="onComplete()"
+      >
+      <ui-spinner [show]="loading$ | async">Erledigt</ui-spinner>
+    </button>
+  }
 </div>

apps/isa-app/src/page/assortment/price-update/price-update.component.html

@@ -5,17 +5,20 @@
     id="asortment-filter-button"
     class="absolute right-0 top-0 h-14 rounded px-5 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
     type="button"
-  >
+    >
     <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
     Filter
   </button>
 </div>
 
-<page-price-update-list
-  *ngIf="showList$ | async; else noResults"
-  [items]="store.items$ | async"
-  [fetching]="store.fetching$ | async"
-></page-price-update-list>
+@if (showList$ | async) {
+  <page-price-update-list
+    [items]="store.items$ | async"
+    [fetching]="store.fetching$ | async"
+  ></page-price-update-list>
+} @else {
+  <div class="bg-white text-h3 text-center pt-10 font-bold rounded-b h-[calc(100vh_-_370px)]">Keine Preisänderungen vorhanden.</div>
+}
 
 <shell-filter-overlay #filterOverlay class="relative">
   <div class="relative">
@@ -26,22 +29,23 @@
 
   <h3 class="text-3xl text-center font-bold mt-8">Filter</h3>
 
-  <ui-filter
-    *ngIf="filterOverlay.isOpen"
-    #filter
-    class="mx-4"
-    [filter]="store.pendingFilter$ | async"
-    (search)="applyFilter()"
-    [loading]="store.fetching$ | async"
-    [hint]="hint$ | async"
-  ></ui-filter>
+  @if (filterOverlay.isOpen) {
+    <ui-filter
+      #filter
+      class="mx-4"
+      [filter]="store.pendingFilter$ | async"
+      (search)="applyFilter()"
+      [loading]="store.fetching$ | async"
+      [hint]="hint$ | async"
+    ></ui-filter>
+  }
 
   <div class="absolute bottom-8 left-0 right-0 grid grid-flow-col gap-4 justify-center">
     <button
       type="button"
       class="px-6 py-4 font-bold bg-white text-brand border-2 border-solid border-brand rounded-full"
       (click)="store.resetPendingFilter()"
-    >
+      >
       Filter zurücksetzen
     </button>
     <button
@@ -49,12 +53,9 @@
       class="px-6 py-4 font-bold bg-brand text-white border-2 border-solid border-brand rounded-full disabled:bg-cadet-blue disabled:cursor-progress disabled:border-cadet-blue"
       (click)="applyFilter()"
       [disabled]="store.fetching$ | async"
-    >
+      >
       <ui-spinner [show]="store.fetching$ | async">Filter anwenden</ui-spinner>
     </button>
   </div>
 </shell-filter-overlay>
 
-<ng-template #noResults>
-  <div class="bg-white text-h3 text-center pt-10 font-bold rounded-b h-[calc(100vh_-_370px)]">Keine Preisänderungen vorhanden.</div>
-</ng-template>

apps/isa-app/src/page/catalog/article-details/article-details-text/article-details-text.component.html

@@ -1,14 +1,16 @@
-<ng-container *ngFor="let line of lines">
-  <ng-container [ngSwitch]="line | lineType">
-    <ng-container *ngSwitchCase="'reihe'">
-      <page-article-details-text-link *ngFor="let reihe of getReihen(line)" [route]="reihe | reiheRoute">
-        {{ reihe }}
-      </page-article-details-text-link>
+@for (line of lines; track line) {
+  @switch (line | lineType) {
+    @case ('reihe') {
+      @for (reihe of getReihen(line); track reihe) {
+        <page-article-details-text-link [route]="reihe | reiheRoute">
+          {{ reihe }}
+        </page-article-details-text-link>
+      }
       <br />
-    </ng-container>
-    <ng-container *ngSwitchDefault>
+    }
+    @default {
       {{ line }}
       <br />
-    </ng-container>
-  </ng-container>
-</ng-container>
+    }
+  }
+}

apps/isa-app/src/page/catalog/article-details/article-details-text/article-details-text.component.ts

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { TextDTO } from '@generated/swagger/cat-search-api';
 import { ArticleDetailsTextLinkComponent } from './article-details-text-link.component';
-import { NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+
 import { LineTypePipe } from './line-type.pipe';
 import { ReiheRoutePipe } from './reihe-route.pipe';
 
@@ -13,13 +13,9 @@ import { ReiheRoutePipe } from './reihe-route.pipe';
   host: { class: 'page-article-details-text' },
   imports: [
     ArticleDetailsTextLinkComponent,
-    NgFor,
-    NgSwitch,
-    NgSwitchCase,
-    NgSwitchDefault,
     LineTypePipe,
-    ReiheRoutePipe,
-  ],
+    ReiheRoutePipe
+],
 })
 export class ArticleDetailsTextComponent {
   @Input()

apps/isa-app/src/page/catalog/article-details/recommendations/article-recommendations.component.html

@@ -1,37 +1,39 @@
-<ng-container *ngIf="store.item$ | async; let item">
+@if (store.item$ | async; as item) {
   <button
     class="h-[3.75rem] shadow-[0_-2px_24px_0_#dce2e9] flex flex-row justify-center items-center w-full text-xl bg-white text-[#0556B4] font-bold border-none outline-none rounded-t"
     (click)="close.emit()"
-  >
+    >
     {{ item?.product?.name }}
   </button>
   <h1>Empfehlungen für Sie</h1>
   <p>Neben dem Titel "{{ item.product?.name }}" gibt es noch andere Artikel, die Sie interessieren könnten.</p>
-
   <div class="articles">
     <span class="label mb-2">
       <ui-icon icon="recommendation" size="20px"></ui-icon>
       Artikel
     </span>
-
-    <ng-container *ngIf="store.recommendations$ | async; let recommendations">
-      <span *ngIf="recommendations.length === 0" class="empty-message">Keine Empfehlungen verfügbar</span>
-
-      <ui-slider *ngIf="recommendations.length > 0" [scrollDistance]="210">
-        <a
-          class="article"
-          *ngFor="let recommendation of store.recommendations$ | async"
-          [routerLink]="getDetailsPath(recommendation.product.ean)"
-          [queryParams]="{ main_qs: recommendation.product.ean, filter_format: '' }"
-          (click)="close.emit()"
-        >
-          <img [src]="recommendation.product?.ean | productImage: 195 : 315 : true" alt="product-image" />
-          <div class="flex flex-col">
-            <span class="format">{{ recommendation.product?.formatDetail }}</span>
-            <span class="price">{{ recommendation.catalogAvailability?.price?.value?.value | currency: ' ' }} EUR</span>
-          </div>
-        </a>
-      </ui-slider>
-    </ng-container>
+    @if (store.recommendations$ | async; as recommendations) {
+      @if (recommendations.length === 0) {
+        <span class="empty-message">Keine Empfehlungen verfügbar</span>
+      }
+      @if (recommendations.length > 0) {
+        <ui-slider [scrollDistance]="210">
+          @for (recommendation of store.recommendations$ | async; track recommendation) {
+            <a
+              class="article"
+              [routerLink]="getDetailsPath(recommendation.product.ean)"
+              [queryParams]="{ main_qs: recommendation.product.ean, filter_format: '' }"
+              (click)="close.emit()"
+              >
+              <img [src]="recommendation.product?.ean | productImage: 195 : 315 : true" alt="product-image" />
+              <div class="flex flex-col">
+                <span class="format">{{ recommendation.product?.formatDetail }}</span>
+                <span class="price">{{ recommendation.catalogAvailability?.price?.value?.value | currency: ' ' }} EUR</span>
+              </div>
+            </a>
+          }
+        </ui-slider>
+      }
+    }
   </div>
-</ng-container>
+}

apps/isa-app/src/page/catalog/article-search/search-filter/search-filter.component.html

@@ -1,19 +1,19 @@
 <div class="hidden desktop-large:block" [class.show-filter]="showFilter">
-  <ng-container *ngIf="filter$ | async; let filter">
+  @if (filter$ | async; as filter) {
     <div class="catalog-search-filter-content">
       <div class="w-full flex flex-row justify-end items-center">
         <button (click)="clearFilter(filter)" class="text-[#0556B4] p-4">Alle Filter entfernen</button>
-        <a
-          *ngIf="showFilterClose$ | async"
-          class="text-black p-4 outline-none border-none bg-transparent"
-          [routerLink]="closeFilterRoute"
-          (click)="showFilter = false"
-          queryParamsHandling="preserve"
-        >
-          <shared-icon icon="close" [size]="25"></shared-icon>
-        </a>
+        @if (showFilterClose$ | async) {
+          <a
+            class="text-black p-4 outline-none border-none bg-transparent"
+            [routerLink]="closeFilterRoute"
+            (click)="showFilter = false"
+            queryParamsHandling="preserve"
+            >
+            <shared-icon icon="close" [size]="25"></shared-icon>
+          </a>
+        }
       </div>
-
       <div class="catalog-search-filter-content-main -mt-14 desktop-small:-mt-8 desktop-large:-mt-12">
         <h1 class="text-h3 text-[1.625rem] font-bold text-center pt-6 pb-10">Filter</h1>
         <shared-filter
@@ -24,16 +24,14 @@
           [scanner]="true"
         ></shared-filter>
       </div>
-
       <div class="cta-wrapper">
         <button class="cta-reset-filter" (click)="resetFilter(filter)" [disabled]="fetching$ | async">Filter zurücksetzen</button>
-
         <button class="cta-apply-filter" (click)="applyFilter(filter)" [disabled]="(fetching$ | async) || !hasSelectedOptions(filter)">
           <ui-spinner [show]="fetching$ | async">Filter anwenden</ui-spinner>
         </button>
       </div>
     </div>
-  </ng-container>
+  }
 </div>
 <div class="desktop-large:hidden" [class.hidden]="showFilter">
   <page-article-search-main (showFilter)="showFilter = true"></page-article-search-main>

apps/isa-app/src/page/catalog/article-search/search-main/search-main.component.html

@@ -1,12 +1,13 @@
 <div class="bg-white rounded py-10 px-4 text-center shadow-[0_-2px_24px_0_#dce2e9] h-full">
   <h1 class="text-h3 text-[1.625rem] font-bold mb-[0.375rem]">Artikelsuche</h1>
   <p class="text-lg mb-10">Welchen Artikel suchen Sie?</p>
-  <ng-container *ngIf="filter$ | async; let filter">
-    <shared-filter-filter-group-main
-      class="mb-8 w-full"
-      *ngIf="!(isDesktop$ | async)"
-      [inputGroup]="filter?.filter | group: 'main'"
-    ></shared-filter-filter-group-main>
+  @if (filter$ | async; as filter) {
+    @if (!(isDesktop$ | async)) {
+      <shared-filter-filter-group-main
+        class="mb-8 w-full"
+        [inputGroup]="filter?.filter | group: 'main'"
+      ></shared-filter-filter-group-main>
+    }
     <div class="flex flex-row px-12 justify-center desktop-large:px-0">
       <shared-filter-input-group-main
         class="block w-full mr-3 desktop-large:mx-auto"
@@ -17,38 +18,40 @@
         [showDescription]="false"
         [scanner]="true"
       ></shared-filter-input-group-main>
-      <button
-        type="button"
-        *ngIf="!(isDesktop$ | async)"
-        (click)="showFilter.emit()"
-        class="page-search-main__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
-        [class.active]="hasFilter$ | async"
-      >
-        <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
-        Filter
-      </button>
+      @if (!(isDesktop$ | async)) {
+        <button
+          type="button"
+          (click)="showFilter.emit()"
+          class="page-search-main__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
+          [class.active]="hasFilter$ | async"
+          >
+          <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
+          Filter
+        </button>
+      }
     </div>
-
     <div class="flex flex-col items-start ml-12 desktop-large:ml-8 py-6 bg-white overflow-hidden h-[calc(100%-13.5rem)]">
       <h3 class="text-p3 font-bold mb-3">Deine letzten Suchanfragen</h3>
       <ul class="flex flex-col justify-start overflow-hidden overflow-y-scroll items-start m-0 p-0 bg-white w-full">
-        <li class="list-none pb-3" *ngFor="let recentQuery of history$ | async">
-          <button
-            class="flex flex-row items-center outline-none border-none bg-white text-black text-p2 m-0 p-0"
-            (click)="setQueryHistory(filter, recentQuery.friendlyName)"
-            matomoClickCategory="search"
-            matomoClickAction="click"
-            matomoClickName="recent-search"
-          >
-            <shared-icon
-              class="flex w-8 h-8 justify-center items-center mr-3 rounded-full text-black bg-[#edeff0]"
-              icon="magnify"
-              [size]="20"
-            ></shared-icon>
-            <p class="m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[25rem]">{{ recentQuery.friendlyName }}</p>
-          </button>
-        </li>
+        @for (recentQuery of history$ | async; track recentQuery) {
+          <li class="list-none pb-3">
+            <button
+              class="flex flex-row items-center outline-none border-none bg-white text-black text-p2 m-0 p-0"
+              (click)="setQueryHistory(filter, recentQuery.friendlyName)"
+              matomoClickCategory="search"
+              matomoClickAction="click"
+              matomoClickName="recent-search"
+              >
+              <shared-icon
+                class="flex w-8 h-8 justify-center items-center mr-3 rounded-full text-black bg-[#edeff0]"
+                icon="magnify"
+                [size]="20"
+              ></shared-icon>
+              <p class="m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[25rem]">{{ recentQuery.friendlyName }}</p>
+            </button>
+          </li>
+        }
       </ul>
     </div>
-  </ng-container>
+  }
 </div>

apps/isa-app/src/page/catalog/article-search/search-results/added-to-cart-modal/added-to-cart-modal.component.html

@@ -1,4 +1,6 @@
-<p class="can-add-message" *ngIf="ref.data.canAddMessage">{{ ref.data.canAddMessage }}</p>
+@if (ref.data.canAddMessage) {
+  <p class="can-add-message">{{ ref.data.canAddMessage }}</p>
+}
 
 <div class="actions">
   <button (click)="continue()" class="cta cta-action-secondary">Weiter Einkaufen</button>

apps/isa-app/src/page/catalog/article-search/search-results/search-result-item-loading.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="!primaryOutletActive; else primaryOutlet">
+@if (!primaryOutletActive) {
   <div class="bg-ucla-blue rounded w-[4.375rem] h-[5.625rem] animate-[load_1s_linear_infinite]"></div>
   <div class="flex flex-col flex-grow">
     <div class="h-4 bg-ucla-blue ml-4 mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
@@ -16,9 +16,7 @@
       <div class="h-4 bg-ucla-blue ml-4 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
     </div>
   </div>
-</ng-container>
-
-<ng-template #primaryOutlet>
+} @else {
   <div class="bg-ucla-blue rounded w-[3rem] h-[4.125rem] animate-[load_1s_linear_infinite]"></div>
   <div class="flex flex-col ml-4 w-[36.6%]">
     <div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
@@ -35,4 +33,5 @@
     <div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
     <div class="h-4 bg-ucla-blue w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
   </div>
-</ng-template>
+}
+

apps/isa-app/src/page/catalog/article-search/search-results/search-result-item.component.html

@@ -2,32 +2,34 @@
   class="page-search-result-item__item-card hover p-5 desktop-small:px-4 desktop-small:py-[0.625rem] h-[13.25rem] desktop-small:h-[11.3125rem] bg-white border border-solid border-transparent rounded"
   [class.page-search-result-item__item-card-primary]="primaryOutletActive"
   [class.active]="isActive"
->
+  >
   <div class="page-search-result-item__item-thumbnail text-center mr-4 w-[3.125rem] h-[4.9375rem]">
-    <img
-      class="page-search-result-item__item-image w-[3.125rem] max-h-[4.9375rem]"
-      loading="lazy"
-      *ngIf="item?.imageId | thumbnailUrl; let thumbnailUrl"
-      [src]="thumbnailUrl"
-      [alt]="item?.product?.name"
-    />
+    @if (item?.imageId | thumbnailUrl; as thumbnailUrl) {
+      <img
+        class="page-search-result-item__item-image w-[3.125rem] max-h-[4.9375rem]"
+        loading="lazy"
+        [src]="thumbnailUrl"
+        [alt]="item?.product?.name"
+        />
+    }
   </div>
 
   <div
     class="page-search-result-item__item-grid-container"
     [class.page-search-result-item__item-grid-container-primary]="primaryOutletActive"
-  >
+    >
     <div
       class="page-search-result-item__item-contributors desktop-small:text-p3 font-bold text-[#0556B4] text-ellipsis overflow-hidden max-w-[24rem] whitespace-nowrap"
-    >
-      <a
-        *ngFor="let contributor of contributors; let last = last"
-        [routerLink]="resultsPath"
-        [queryParams]="{ main_qs: contributor, main_author: 'author' }"
-        (click)="$event?.stopPropagation()"
       >
-        {{ contributor }}{{ last ? '' : ';' }}
-      </a>
+      @for (contributor of contributors; track contributor; let last = $last) {
+        <a
+          [routerLink]="resultsPath"
+          [queryParams]="{ main_qs: contributor, main_author: 'author' }"
+          (click)="$event?.stopPropagation()"
+          >
+          {{ contributor }}{{ last ? '' : ';' }}
+        </a>
+      }
     </div>
 
     <div
@@ -37,21 +39,24 @@
       [class.text-md]="item?.product?.name?.length >= 50 && isTablet"
       [class.text-p3]="item?.product?.name?.length >= 60 || !isTablet"
       [class.text-xs]="item?.product?.name?.length >= 100"
-    >
+      >
       {{ item?.product?.name }}
     </div>
 
     <div class="page-search-result-item__item-format desktop-small:text-p3">
-      <div *ngIf="item?.product?.format && item?.product?.formatDetail" class="font-bold flex flex-row">
-        <img
-          class="mr-3"
-          *ngIf="item?.product?.format !== '--'"
-          loading="lazy"
-          src="assets/images/Icon_{{ item?.product?.format }}.svg"
-          [alt]="item?.product?.formatDetail"
-        />
-        {{ item?.product?.formatDetail | substr: 30 }}
-      </div>
+      @if (item?.product?.format && item?.product?.formatDetail) {
+        <div class="font-bold flex flex-row">
+          @if (item?.product?.format !== '--') {
+            <img
+              class="mr-3"
+              loading="lazy"
+              src="assets/images/Icon_{{ item?.product?.format }}.svg"
+              [alt]="item?.product?.formatDetail"
+              />
+          }
+          {{ item?.product?.formatDetail | substr: 30 }}
+        </div>
+      }
     </div>
 
     <div class="page-search-result-item__item-manufacturer desktop-small:text-p3">
@@ -60,31 +65,34 @@
 
     <div class="page-search-result-item__item-misc desktop-small:text-p3">
       {{ item?.product?.volume }}
-      <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
+      @if (item?.product?.volume && item?.product?.publicationDate) {
+        <span>|</span>
+      }
       {{ publicationDate }}
     </div>
 
     <div
       class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end"
       [class.page-search-result-item__item-price-primary]="primaryOutletActive"
-    >
+      >
       {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR' : 'code' }}
     </div>
 
     <div class="page-search-result-item__item-select-bullet justify-self-end">
-      <input
-        *ngIf="selectable"
-        (click)="$event.stopPropagation()"
-        [ngModel]="selected"
+      @if (selectable) {
+        <input
+          (click)="$event.stopPropagation()"
+          [ngModel]="selected"
         (ngModelChange)="
           setSelected();
           tracker.trackEvent({ category: 'Trefferliste', action: 'select', name: item.product.name, value: selected ? 1 : 0 })
         "
-        class="isa-select-bullet"
-        type="checkbox"
-        matomoTracker
-        #tracker="matomo"
-      />
+          class="isa-select-bullet"
+          type="checkbox"
+          matomoTracker
+          #tracker="matomo"
+          />
+      }
     </div>
 
     <button
@@ -94,20 +102,21 @@
       [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
       type="button"
       (click)="$event.stopPropagation(); $event.preventDefault(); showTooltip()"
-    >
+      >
       <ui-icon class="mr-[0.125rem] -mt-[0.275rem]" icon="home" size="1rem"></ui-icon>
-      <ng-container *ngIf="isOrderBranch$ | async">
-        <span
-          *ngIf="inStock$ | async; let stock"
-          [class.skeleton]="stock.inStock === undefined"
-          class="min-w-[0.75rem] text-right inline-block"
-        >
-          {{ stock?.inStock }}
-        </span>
-      </ng-container>
-      <ng-container *ngIf="!(isOrderBranch$ | async)">
+      @if (isOrderBranch$ | async) {
+        @if (inStock$ | async; as stock) {
+          <span
+            [class.skeleton]="stock.inStock === undefined"
+            class="min-w-[0.75rem] text-right inline-block"
+            >
+            {{ stock?.inStock }}
+          </span>
+        }
+      }
+      @if (!(isOrderBranch$ | async)) {
         <span class="min-w-[1rem] text-center inline-block">-</span>
-      </ng-container>
+      }
       <span>x</span>
     </button>
     <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-12" [closeable]="true">
@@ -117,14 +126,14 @@
     <div
       class="page-search-result-item__item-ssc desktop-small:text-p3 w-full text-right overflow-hidden text-ellipsis whitespace-nowrap"
       [class.page-search-result-item__item-ssc-primary]="primaryOutletActive"
-    >
-      <ng-container *ngIf="ssc$ | async; let ssc">
+      >
+      @if (ssc$ | async; as ssc) {
         <div class="hidden" [class.page-search-result-item__item-ssc-tooltip]="primaryOutletActive">
           {{ ssc?.ssc }} - {{ ssc?.sscText }}
         </div>
         <strong>{{ ssc?.ssc }}</strong>
         - {{ ssc?.sscText }}
-      </ng-container>
+      }
     </div>
   </div>
 </div>

apps/isa-app/src/page/catalog/article-search/search-results/search-results.component.html

@@ -2,50 +2,53 @@
   class="page-search-results__header bg-background-liste flex items-end justify-between"
   [class.pb-4]="!(primaryOutletActive$ | async)"
   [class.flex-col]="!(primaryOutletActive$ | async)"
->
+  >
   <div class="flex flex-row w-full desktop:w-min" [class.desktop-large:w-full]="!(primaryOutletActive$ | async)">
-    <shared-filter-input-group-main
-      *ngIf="filter$ | async; let filter"
-      class="block mr-3 w-full desktop:w-[23.5rem]"
-      [class.desktop-large:w-full]="!(primaryOutletActive$ | async)"
-      [hint]="searchboxHint$ | async"
-      [loading]="fetching$ | async"
-      [inputGroup]="filter?.input | group: 'main'"
-      (search)="search({ filter, clear: true })"
-      [showDescription]="false"
-      [scanner]="true"
-    ></shared-filter-input-group-main>
+    @if (filter$ | async; as filter) {
+      <shared-filter-input-group-main
+        class="block mr-3 w-full desktop:w-[23.5rem]"
+        [class.desktop-large:w-full]="!(primaryOutletActive$ | async)"
+        [hint]="searchboxHint$ | async"
+        [loading]="fetching$ | async"
+        [inputGroup]="filter?.input | group: 'main'"
+        (search)="search({ filter, clear: true })"
+        [showDescription]="false"
+        [scanner]="true"
+      ></shared-filter-input-group-main>
+    }
 
     <a
       class="page-search-results__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
       [class.active]="hasFilter$ | async"
       [routerLink]="filterRoute"
       [queryParams]="filterQueryParams"
-    >
+      >
       <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
       Filter
     </a>
   </div>
 
-  <div
-    *ngIf="hits$ | async; let hits"
-    class="page-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
-    [class.mb-4]="primaryOutletActive$ | async"
-  >
-    {{ hits ?? 0 }}
-    Titel
-  </div>
+  @if (hits$ | async; as hits) {
+    <div
+      class="page-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
+      [class.mb-4]="primaryOutletActive$ | async"
+      >
+      {{ hits ?? 0 }}
+      Titel
+    </div>
+  }
 </div>
 
 <div class="page-search-results__order-by mb-[0.125rem]" [class.page-search-results__order-by-primary]="primaryOutletActive$ | async">
-  <shared-order-by-filter
-    *ngIf="filter$ | async; let filter"
-    [orderBy]="filter?.orderBy"
-    (selectedOrderByChange)="search({ filter, clear: true, orderBy: true }); updateBreadcrumbs()"
-  ></shared-order-by-filter>
+  @if (filter$ | async; as filter) {
+    <shared-order-by-filter
+      [orderBy]="filter?.orderBy"
+      (selectedOrderByChange)="search({ filter, clear: true, orderBy: true }); updateBreadcrumbs()"
+    ></shared-order-by-filter>
+  }
 </div>
 
-<ng-container *ngIf="primaryOutletActive$ | async; else sideOutlet">
+@if (primaryOutletActive$ | async) {
   <cdk-virtual-scroll-viewport class="product-list" [itemSize]="103 * (scale$ | async)" (scrolledIndexChange)="scrolledIndexChange($event)">
     <a
       *cdkVirtualFor="let item of results$ | async; let i = index; trackBy: trackByItemId"
@@ -54,7 +57,7 @@
       #rla="routerLinkActive"
       queryParamsHandling="preserve"
       (click)="scrollToItem(i)"
-    >
+      >
       <search-result-item
         class="page-search-results__result-item page-search-results__result-item-primary"
         (selectedChange)="addToCart($event)"
@@ -65,24 +68,25 @@
         [isActive]="rla.isActive"
       ></search-result-item>
     </a>
-    <page-search-result-item-loading [primaryOutletActive]="true" *ngIf="fetching$ | async"></page-search-result-item-loading>
+    @if (fetching$ | async) {
+      <page-search-result-item-loading [primaryOutletActive]="true"></page-search-result-item-loading>
+    }
   </cdk-virtual-scroll-viewport>
   <div class="actions z-sticky h-0">
-    <button
-      [disabled]="loading$ | async"
-      *ngIf="(selectedItemIds$ | async)?.length > 0"
-      class="cta-cart cta-action-primary"
-      (click)="addToCart()"
-      matomoClickCategory="Trefferliste"
-      matomoClickAction="click"
-      matomoClickName="In den Warenkorb legen"
-    >
-      <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
-    </button>
+    @if ((selectedItemIds$ | async)?.length > 0) {
+      <button
+        [disabled]="loading$ | async"
+        class="cta-cart cta-action-primary"
+        (click)="addToCart()"
+        matomoClickCategory="Trefferliste"
+        matomoClickAction="click"
+        matomoClickName="In den Warenkorb legen"
+        >
+        <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
+      </button>
+    }
   </div>
-</ng-container>
-
-<ng-template #sideOutlet>
+} @else {
   <cdk-virtual-scroll-viewport class="product-list" [itemSize]="191 * (scale$ | async)" (scrolledIndexChange)="scrolledIndexChange($event)">
     <a
       *cdkVirtualFor="let item of results$ | async; let i = index; trackBy: trackByItemId"
@@ -91,7 +95,7 @@
       #rla="routerLinkActive"
       queryParamsHandling="preserve"
       (click)="scrollToItem(i)"
-    >
+      >
       <search-result-item
         class="page-search-results__result-item"
         (selectedChange)="addToCart($event)"
@@ -102,16 +106,20 @@
         [isActive]="rla.isActive"
       ></search-result-item>
     </a>
-    <page-search-result-item-loading [primaryOutletActive]="false" *ngIf="fetching$ | async"></page-search-result-item-loading>
+    @if (fetching$ | async) {
+      <page-search-result-item-loading [primaryOutletActive]="false"></page-search-result-item-loading>
+    }
   </cdk-virtual-scroll-viewport>
   <div class="actions z-sticky h-0">
-    <button
-      [disabled]="loading$ | async"
-      *ngIf="(selectedItemIds$ | async)?.length > 0"
-      class="cta-cart cta-action-primary"
-      (click)="addToCart()"
-    >
-      <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
-    </button>
+    @if ((selectedItemIds$ | async)?.length > 0) {
+      <button
+        [disabled]="loading$ | async"
+        class="cta-cart cta-action-primary"
+        (click)="addToCart()"
+        >
+        <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
+      </button>
+    }
   </div>
-</ng-template>
+}
+

apps/isa-app/src/page/checkout/checkout-dummy/checkout-dummy.component.html

@@ -9,87 +9,93 @@
       </p>
     </div>
   </div>
-  <form *ngIf="control" [formGroup]="control" (submit)="submit()">
-    <ui-form-control class="searchbox-control" label="EAN/ISBN">
-      <ui-searchbox
-        formControlName="ean"
-        [query]="query$ | async"
-        (queryChange)="setQuery($event)"
-        (search)="search($event)"
-        (scan)="search($event)"
-        [loading]="loading$ | async"
-        [hint]="message$ | async"
-        tabindex="0"
-        [scanner]="true"
-      ></ui-searchbox>
-    </ui-form-control>
-    <ui-form-control label="Titel" requiredMark="*">
-      <input tabindex="0" uiInput formControlName="name" />
-    </ui-form-control>
-    <div class="control-row">
-      <ui-form-control label="Menge" requiredMark="*">
-        <input tabindex="0" uiInput formControlName="quantity" />
+  @if (control) {
+    <form [formGroup]="control" (submit)="submit()">
+      <ui-form-control class="searchbox-control" label="EAN/ISBN">
+        <ui-searchbox
+          formControlName="ean"
+          [query]="query$ | async"
+          (queryChange)="setQuery($event)"
+          (search)="search($event)"
+          (scan)="search($event)"
+          [loading]="loading$ | async"
+          [hint]="message$ | async"
+          tabindex="0"
+          [scanner]="true"
+        ></ui-searchbox>
       </ui-form-control>
-      <ui-form-control class="datepicker" label="vsl. Lieferdatum" requiredMark="*">
-        <button
-          tabindex="-1"
-          class="date-btn"
-          type="button"
-          [class.content-selected]="!!(estimatedShippingDate$ | async)"
-          [uiOverlayTrigger]="uiDatepicker"
-          #datepicker="uiOverlayTrigger"
-        >
-          <strong>
-            {{ estimatedShippingDate$ | async | date: 'dd.MM.yy' }}
-          </strong>
-          <ui-icon icon="arrow_head" class="dp-button-icon" size="20px" [rotate]="datepicker.opened ? '270deg' : '90deg'"></ui-icon>
-        </button>
-        <ui-datepicker
-          formControlName="estimatedShippingDate"
-          #uiDatepicker
-          yPosition="below"
-          xPosition="after"
-          [min]="minDate"
-          [disabledDaysOfWeek]="[0]"
-          [selected]="estimatedShippingDate$ | async"
-          saveLabel="Übernehmen"
-          (save)="changeEstimatedShippingDate($event); uiDatepicker.close()"
-        ></ui-datepicker>
+      <ui-form-control label="Titel" requiredMark="*">
+        <input tabindex="0" uiInput formControlName="name" />
       </ui-form-control>
-    </div>
-    <ui-form-control label="Autor">
-      <input tabindex="0" uiInput formControlName="contributors" />
-    </ui-form-control>
-    <ui-form-control label="Verlag">
-      <input tabindex="0" uiInput formControlName="manufacturer" />
-    </ui-form-control>
-    <ui-form-control class="supplier-dropdown" label="Lieferant" requiredMark="*">
-      <ui-select tabindex="-1" formControlName="supplier">
-        <ui-select-option *ngFor="let supplier of suppliers$ | async" [label]="supplier.name" [value]="supplier.id"></ui-select-option>
-      </ui-select>
-    </ui-form-control>
-    <div class="control-row">
-      <ui-form-control class="price" label="Stückpreis" [suffix]="price.value ? '€' : ''" requiredMark="*">
-        <input tabindex="0" #price uiInput formControlName="price" />
+      <div class="control-row">
+        <ui-form-control label="Menge" requiredMark="*">
+          <input tabindex="0" uiInput formControlName="quantity" />
+        </ui-form-control>
+        <ui-form-control class="datepicker" label="vsl. Lieferdatum" requiredMark="*">
+          <button
+            tabindex="-1"
+            class="date-btn"
+            type="button"
+            [class.content-selected]="!!(estimatedShippingDate$ | async)"
+            [uiOverlayTrigger]="uiDatepicker"
+            #datepicker="uiOverlayTrigger"
+            >
+            <strong>
+              {{ estimatedShippingDate$ | async | date: 'dd.MM.yy' }}
+            </strong>
+            <ui-icon icon="arrow_head" class="dp-button-icon" size="20px" [rotate]="datepicker.opened ? '270deg' : '90deg'"></ui-icon>
+          </button>
+          <ui-datepicker
+            formControlName="estimatedShippingDate"
+            #uiDatepicker
+            yPosition="below"
+            xPosition="after"
+            [min]="minDate"
+            [disabledDaysOfWeek]="[0]"
+            [selected]="estimatedShippingDate$ | async"
+            saveLabel="Übernehmen"
+            (save)="changeEstimatedShippingDate($event); uiDatepicker.close()"
+          ></ui-datepicker>
+        </ui-form-control>
+      </div>
+      <ui-form-control label="Autor">
+        <input tabindex="0" uiInput formControlName="contributors" />
       </ui-form-control>
-      <ui-form-control class="mwst-dropdown" label="MwSt" requiredMark="*">
-        <ui-select tabindex="-1" formControlName="vat">
-          <ui-select-option *ngFor="let vat of vats$ | async" [label]="vat.name + '%'" [value]="vat.vatType"></ui-select-option>
+      <ui-form-control label="Verlag">
+        <input tabindex="0" uiInput formControlName="manufacturer" />
+      </ui-form-control>
+      <ui-form-control class="supplier-dropdown" label="Lieferant" requiredMark="*">
+        <ui-select tabindex="-1" formControlName="supplier">
+          @for (supplier of suppliers$ | async; track supplier) {
+            <ui-select-option [label]="supplier.name" [value]="supplier.id"></ui-select-option>
+          }
         </ui-select>
       </ui-form-control>
-    </div>
-    <div class="actions">
-      <button
-        class="cta-secondary"
-        (click)="nextItem()"
-        [disabled]="control.invalid || control.disabled || (loading$ | async)"
-        type="button"
-      >
-        Weitere Artikel hinzufügen
-      </button>
-      <button class="cta-primary" [disabled]="control.invalid || control.disabled || (loading$ | async)" type="submit">
-        Bestellung anlegen
-      </button>
-    </div>
-  </form>
+      <div class="control-row">
+        <ui-form-control class="price" label="Stückpreis" [suffix]="price.value ? '€' : ''" requiredMark="*">
+          <input tabindex="0" #price uiInput formControlName="price" />
+        </ui-form-control>
+        <ui-form-control class="mwst-dropdown" label="MwSt" requiredMark="*">
+          <ui-select tabindex="-1" formControlName="vat">
+            @for (vat of vats$ | async; track vat) {
+              <ui-select-option [label]="vat.name + '%'" [value]="vat.vatType"></ui-select-option>
+            }
+          </ui-select>
+        </ui-form-control>
+      </div>
+      <div class="actions">
+        <button
+          class="cta-secondary"
+          (click)="nextItem()"
+          [disabled]="control.invalid || control.disabled || (loading$ | async)"
+          type="button"
+          >
+          Weitere Artikel hinzufügen
+        </button>
+        <button class="cta-primary" [disabled]="control.invalid || control.disabled || (loading$ | async)" type="submit">
+          Bestellung anlegen
+        </button>
+      </div>
+    </form>
+  }
 </div>

apps/isa-app/src/page/checkout/checkout-review/checkout-review.component.html

@@ -1,10 +1,9 @@
-<ng-container *ngIf="(groupedItems$ | async)?.length <= 0 && !(fetching$ | async); else shoppingCart">
+@if ((groupedItems$ | async)?.length <= 0 && !(fetching$ | async)) {
   <div class="card stretch">
     <div class="empty-message">
       <span class="cart-icon flex items-center justify-center">
         <shared-icon icon="shopping-cart-bold" [size]="24"></shared-icon>
       </span>
-
       <h1>Ihr Warenkorb ist leer.</h1>
       <p>
         Sie haben alle Artikel aus dem
@@ -13,84 +12,75 @@
         <br />
         keinen Artikel hinzugefügt.
       </p>
-
       <div class="btn-wrapper">
         <a class="cta-primary" [routerLink]="productSearchBasePath">Artikel suchen</a>
         <button class="cta-secondary" (click)="openDummyModal({})">Neuanlage</button>
       </div>
     </div>
   </div>
-</ng-container>
-
-<div class="flex items-center justify-center card stretch" *ngIf="fetching$ | async">
-  <ui-spinner [show]="true"></ui-spinner>
-</div>
-
-<ng-template #shoppingCart>
-  <ng-container *ngIf="shoppingCart$ | async; let shoppingCart">
+} @else {
+  @if (shoppingCart$ | async; as shoppingCart) {
     <div class="card stretch">
       <div class="cta-print-wrapper">
         <button class="cta-print" (click)="openPrintModal()">Drucken</button>
       </div>
       <h1 class="header">Warenkorb</h1>
-
-      <ng-container *ngIf="!(isDesktop$ | async)">
+      @if (!(isDesktop$ | async)) {
         <page-checkout-review-details></page-checkout-review-details>
-      </ng-container>
-
-      <ng-container *ngFor="let group of groupedItems$ | async; let lastGroup = last; trackBy: trackByGroupedItems">
-        <ng-container *ngIf="group?.orderType !== undefined">
+      }
+      @for (group of groupedItems$ | async; track trackByGroupedItems($index, group); let lastGroup = $last) {
+        @if (group?.orderType !== undefined) {
           <hr />
           <div class="row item-group-header bg-[#F5F7FA]">
-            <shared-icon
-              *ngIf="group.orderType !== 'Dummy'"
-              class="icon-order-type"
-              [size]="group.orderType === 'B2B-Versand' ? 36 : 24"
-              [icon]="group.orderType"
-            ></shared-icon>
-
+            @if (group.orderType !== 'Dummy') {
+              <shared-icon
+                class="icon-order-type"
+                [size]="group.orderType === 'B2B-Versand' ? 36 : 24"
+                [icon]="group.orderType"
+              ></shared-icon>
+            }
             <div class="label" [class.dummy]="group.orderType === 'Dummy'">
               {{ group.orderType !== 'Dummy' ? group.orderType : 'Manuelle Anlage / Dummy Bestellung' }}
-              <button
-                *ngIf="group.orderType === 'Dummy'"
-                class="text-brand border-none font-bold text-p1 outline-none pl-4"
-                (click)="openDummyModal({ changeDataFromCart: true })"
-              >
-                Hinzufügen
-              </button>
+              @if (group.orderType === 'Dummy') {
+                <button
+                  class="text-brand border-none font-bold text-p1 outline-none pl-4"
+                  (click)="openDummyModal({ changeDataFromCart: true })"
+                  >
+                  Hinzufügen
+                </button>
+              }
             </div>
-
             <div class="grow"></div>
-            <div class="pl-4" *ngIf="group.orderType !== 'Download' && group.orderType !== 'Dummy'">
-              <button class="cta-edit" (click)="showPurchasingListModal(group.items)">Ändern</button>
-            </div>
+            @if (group.orderType !== 'Download' && group.orderType !== 'Dummy') {
+              <div class="pl-4">
+                <button class="cta-edit" (click)="showPurchasingListModal(group.items)">Ändern</button>
+              </div>
+            }
           </div>
-          <hr
-            *ngIf="
-              group.orderType === 'Download' ||
-              group.orderType === 'Versand' ||
-              group.orderType === 'B2B-Versand' ||
-              group.orderType === 'DIG-Versand'
-            "
-          />
-        </ng-container>
-        <ng-container *ngFor="let item of group.items; let lastItem = last; let i = index; trackBy: trackByItemId">
-          <ng-container
-            *ngIf="group?.orderType !== undefined && (item.features?.orderType === 'Abholung' || item.features?.orderType === 'Rücklage')"
-          >
-            <ng-container *ngIf="item?.destination?.data?.targetBranch?.data; let targetBranch">
-              <ng-container *ngIf="i === 0 || checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)">
+          @if (
+            group.orderType === 'Download' ||
+            group.orderType === 'Versand' ||
+            group.orderType === 'B2B-Versand' ||
+            group.orderType === 'DIG-Versand'
+            ) {
+            <hr
+              />
+          }
+        }
+        @for (item of group.items; track trackByItemId(i, item); let lastItem = $last; let i = $index) {
+          @if (group?.orderType !== undefined && (item.features?.orderType === 'Abholung' || item.features?.orderType === 'Rücklage')) {
+            @if (item?.destination?.data?.targetBranch?.data; as targetBranch) {
+              @if (i === 0 || checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)) {
                 <div
                   class="flex flex-row items-center px-5 pt-0 pb-[0.875rem] -mt-2 bg-[#F5F7FA]"
                   [class.multiple-destinations]="checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)"
-                >
+                  >
                   <span class="branch-name">{{ targetBranch?.name }} | {{ targetBranch | branchAddress }}</span>
                 </div>
                 <hr />
-              </ng-container>
-            </ng-container>
-          </ng-container>
-
+              }
+            }
+          }
           <page-shopping-cart-item
             (changeItem)="changeItem($event)"
             (changeDummyItem)="changeDummyItem($event)"
@@ -101,19 +91,22 @@
             [loadingOnItemChangeById]="loadingOnItemChangeById$ | async"
             [loadingOnQuantityChangeById]="loadingOnQuantityChangeById$ | async"
           ></page-shopping-cart-item>
-
-          <hr *ngIf="!lastItem" />
-        </ng-container>
-      </ng-container>
+          @if (!lastItem) {
+            <hr />
+          }
+        }
+      }
       <div class="h-[8.9375rem]"></div>
     </div>
     <div class="card footer flex flex-col justify-center items-center">
       <div class="flex flex-row items-start justify-between w-full mb-1">
-        <ng-container *ngIf="totalItemCount$ | async; let totalItemCount">
-          <div *ngIf="totalReadingPoints$ | async; let totalReadingPoints" class="total-item-reading-points w-full">
-            {{ totalItemCount }} Artikel | {{ totalReadingPoints }} Lesepunkte
-          </div>
-        </ng-container>
+        @if (totalItemCount$ | async; as totalItemCount) {
+          @if (totalReadingPoints$ | async; as totalReadingPoints) {
+            <div class="total-item-reading-points w-full">
+              {{ totalItemCount }} Artikel | {{ totalReadingPoints }} Lesepunkte
+            </div>
+          }
+        }
         <div class="flex flex-col w-full">
           <strong class="total-value">
             Zwischensumme {{ shoppingCart?.total?.value | currency: shoppingCart?.total?.currency : 'code' }}
@@ -130,11 +123,18 @@
           notificationsControl?.invalid ||
           ((primaryCtaLabel$ | async) === 'Bestellen' && ((checkingOla$ | async) || (checkoutIsInValid$ | async)))
         "
-      >
+        >
         <ui-spinner [show]="showOrderButtonSpinner">
           {{ primaryCtaLabel$ | async }}
         </ui-spinner>
       </button>
     </div>
-  </ng-container>
-</ng-template>
+  }
+}
+
+@if (fetching$ | async) {
+  <div class="flex items-center justify-center card stretch">
+    <ui-spinner [show]="true"></ui-spinner>
+  </div>
+}
+

apps/isa-app/src/page/checkout/checkout-review/checkout-review.component.ts

@@ -9,37 +9,53 @@ import {
   AfterViewInit,
   TrackByFunction,
   inject,
-} from '@angular/core';
-import { Router } from '@angular/router';
-import { ApplicationService } from '@core/application';
-import { DomainAvailabilityService } from '@domain/availability';
-import { DomainCheckoutService } from '@domain/checkout';
-import { AvailabilityDTO, BranchDTO, DestinationDTO, ShoppingCartItemDTO } from '@generated/swagger/checkout-api';
-import { UiMessageModalComponent, UiModalService } from '@ui/modal';
-import { PrintModalData, PrintModalComponent } from '@modal/printer';
-import { delay, first, map, switchMap, takeUntil, tap } from 'rxjs/operators';
-import { Subject, NEVER, combineLatest, BehaviorSubject, Subscription } from 'rxjs';
-import { DomainCatalogService } from '@domain/catalog';
-import { BreadcrumbService } from '@core/breadcrumb';
-import { DomainPrinterService } from '@domain/printer';
-import { CheckoutDummyComponent } from '../checkout-dummy/checkout-dummy.component';
-import { CheckoutDummyData } from '../checkout-dummy/checkout-dummy-data';
-import { PurchaseOptionsModalService } from '@modal/purchase-options';
-import { CheckoutNavigationService, ProductCatalogNavigationService } from '@shared/services/navigation';
-import { EnvironmentService } from '@core/environment';
-import { CheckoutReviewStore } from './checkout-review.store';
-import { ToasterService } from '@shared/shell';
-import { ShoppingCartItemComponent } from './shopping-cart-item/shopping-cart-item.component';
-import { CustomerSearchNavigation } from '@shared/services/navigation';
+} from "@angular/core";
+import { Router } from "@angular/router";
+import { ApplicationService } from "@core/application";
+import { DomainAvailabilityService } from "@domain/availability";
+import { DomainCheckoutService } from "@domain/checkout";
+import {
+  AvailabilityDTO,
+  BranchDTO,
+  DestinationDTO,
+  ShoppingCartItemDTO,
+} from "@generated/swagger/checkout-api";
+import { UiMessageModalComponent, UiModalService } from "@ui/modal";
+import { PrintModalData, PrintModalComponent } from "@modal/printer";
+import { delay, first, map, switchMap, takeUntil, tap } from "rxjs/operators";
+import {
+  Subject,
+  NEVER,
+  combineLatest,
+  BehaviorSubject,
+  Subscription,
+} from "rxjs";
+import { DomainCatalogService } from "@domain/catalog";
+import { BreadcrumbService } from "@core/breadcrumb";
+import { DomainPrinterService } from "@domain/printer";
+import { CheckoutDummyComponent } from "../checkout-dummy/checkout-dummy.component";
+import { CheckoutDummyData } from "../checkout-dummy/checkout-dummy-data";
+import { PurchaseOptionsModalService } from "@modal/purchase-options";
+import {
+  CheckoutNavigationService,
+  ProductCatalogNavigationService,
+} from "@shared/services/navigation";
+import { EnvironmentService } from "@core/environment";
+import { CheckoutReviewStore } from "./checkout-review.store";
+import { ToasterService } from "@shared/shell";
+import { ShoppingCartItemComponent } from "./shopping-cart-item/shopping-cart-item.component";
+import { CustomerSearchNavigation } from "@shared/services/navigation";
 
 @Component({
-  selector: 'page-checkout-review',
-  templateUrl: 'checkout-review.component.html',
-  styleUrls: ['checkout-review.component.scss'],
+  selector: "page-checkout-review",
+  templateUrl: "checkout-review.component.html",
+  styleUrls: ["checkout-review.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit {
+export class CheckoutReviewComponent
+  implements OnInit, OnDestroy, AfterViewInit
+{
   private _onDestroy$ = new Subject<void>();
 
   private _customerSearchNavigation = inject(CustomerSearchNavigation);
@@ -57,7 +73,9 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
 
   shoppingCartItemsWithoutOrderType$ = this._store.shoppingCartItems$.pipe(
     takeUntil(this._store.orderCompleted),
-    map((items) => items?.filter((item) => item?.features?.orderType === undefined)),
+    map((items) =>
+      items?.filter((item) => item?.features?.orderType === undefined),
+    ),
   );
 
   trackByGroupedItems: TrackByFunction<{
@@ -71,11 +89,11 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
     map((items) =>
       items.reduce(
         (grouped, item) => {
-          let index = grouped.findIndex((g) =>
-            item?.availability?.supplyChannel === 'MANUALLY'
-              ? g?.orderType === 'Dummy'
-              : item?.features?.orderType === 'DIG-Versand'
-                ? g?.orderType === 'Versand'
+          const index = grouped.findIndex((g) =>
+            item?.availability?.supplyChannel === "MANUALLY"
+              ? g?.orderType === "Dummy"
+              : item?.features?.orderType === "DIG-Versand"
+                ? g?.orderType === "Versand"
                 : g?.orderType === item?.features?.orderType,
           );
 
@@ -83,10 +101,10 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
           if (!group) {
             group = {
               orderType:
-                item?.availability?.supplyChannel === 'MANUALLY'
-                  ? 'Dummy'
-                  : item?.features?.orderType === 'DIG-Versand'
-                    ? 'Versand'
+                item?.availability?.supplyChannel === "MANUALLY"
+                  ? "Dummy"
+                  : item?.features?.orderType === "DIG-Versand"
+                    ? "Versand"
                     : item?.features?.orderType,
               destination: item?.destination?.data,
               items: [],
@@ -95,7 +113,8 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
 
           group.items = [...group.items, item]?.sort(
             (a, b) =>
-              a.destination?.data?.targetBranch?.id - b.destination?.data?.targetBranch?.id ||
+              a.destination?.data?.targetBranch?.id -
+                b.destination?.data?.targetBranch?.id ||
               a.product?.name.localeCompare(b.product?.name),
           );
 
@@ -105,9 +124,19 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
             grouped.push(group);
           }
 
-          return [...grouped].sort((a, b) => (a?.orderType === undefined ? -1 : b?.orderType === undefined ? 1 : 0));
+          return [...grouped].sort((a, b) =>
+            a?.orderType === undefined
+              ? -1
+              : b?.orderType === undefined
+                ? 1
+                : 0,
+          );
         },
-        [] as { orderType: string; destination: DestinationDTO; items: ShoppingCartItemDTO[] }[],
+        [] as {
+          orderType: string;
+          destination: DestinationDTO;
+          items: ShoppingCartItemDTO[];
+        }[],
       ),
     ),
   );
@@ -138,7 +167,14 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
           .getPromotionPoints({
             items,
           })
-          .pipe(map((response) => Object.values(response.result).reduce((sum, points) => sum + points, 0)));
+          .pipe(
+            map((response) =>
+              Object.values(response.result).reduce(
+                (sum, points) => sum + points,
+                0,
+              ),
+            ),
+          );
       } else {
         return NEVER;
       }
@@ -147,20 +183,25 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
 
   customerFeatures$ = this._store.customerFeatures$;
 
-  checkNotificationChannelControl$ = this._store.checkNotificationChannelControl$;
+  checkNotificationChannelControl$ =
+    this._store.checkNotificationChannelControl$;
 
   showQuantityControlSpinnerItemId: number;
   quantityError$ = new BehaviorSubject<{ [key: string]: string }>({});
 
-  primaryCtaLabel$ = combineLatest([this.payer$, this.buyer$, this.shoppingCartItemsWithoutOrderType$]).pipe(
+  primaryCtaLabel$ = combineLatest([
+    this.payer$,
+    this.buyer$,
+    this.shoppingCartItemsWithoutOrderType$,
+  ]).pipe(
     map(([payer, buyer, shoppingCartItemsWithoutOrderType]) => {
       if (shoppingCartItemsWithoutOrderType?.length > 0) {
-        return 'Kaufoptionen';
+        return "Kaufoptionen";
       }
       if (!(payer || buyer)) {
-        return 'Weiter';
+        return "Weiter";
       }
-      return 'Bestellen';
+      return "Bestellen";
     }),
   );
 
@@ -181,12 +222,16 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
 
   checkoutIsInValid$ = this.applicationService.activatedProcessId$.pipe(
     takeUntil(this._onDestroy$),
-    switchMap((processId) => this.domainCheckoutService.checkoutIsValid({ processId })),
+    switchMap((processId) =>
+      this.domainCheckoutService.checkoutIsValid({ processId }),
+    ),
     map((valid) => !valid),
   );
 
   get productSearchBasePath() {
-    return this._productNavigationService.getArticleSearchBasePath(this.applicationService.activatedProcessId).path;
+    return this._productNavigationService.getArticleSearchBasePath(
+      this.applicationService.activatedProcessId,
+    ).path;
   }
 
   get isDesktop$() {
@@ -219,14 +264,16 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
   ) {}
 
   async ngOnInit() {
-    this.applicationService.activatedProcessId$.pipe(takeUntil(this._onDestroy$)).subscribe((_) => {
-      this._store.loadShoppingCart();
-    });
+    this.applicationService.activatedProcessId$
+      .pipe(takeUntil(this._onDestroy$))
+      .subscribe((_) => {
+        this._store.loadShoppingCart();
+      });
 
     await this.removeBreadcrumbs();
     await this.updateBreadcrumb();
 
-    window['Checkout'] = {
+    window["Checkout"] = {
       refreshAvailabilities: this.refreshAvailabilities.bind(this),
     };
   }
@@ -267,13 +314,16 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
     group: { items: ShoppingCartItemDTO[] },
     i: number,
   ) {
-    return i === 0 ? false : targetBranch.id !== group.items[i - 1].destination?.data?.targetBranch?.data.id;
+    return i === 0
+      ? false
+      : targetBranch.id !==
+          group.items[i - 1].destination?.data?.targetBranch?.data.id;
   }
 
   async refreshAvailabilities() {
     this.checkingOla$.next(true);
 
-    for (let itemComp of this._shoppingCartItems.toArray()) {
+    for (const itemComp of this._shoppingCartItems.toArray()) {
       await itemComp.refreshAvailability();
       await new Promise((resolve) => setTimeout(resolve, 100));
     }
@@ -283,16 +333,22 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
   async updateBreadcrumb() {
     await this.breadcrumb.addOrUpdateBreadcrumbIfNotExists({
       key: this.applicationService.activatedProcessId,
-      name: 'Warenkorb',
-      path: this._navigationService.getCheckoutReviewPath(this.applicationService.activatedProcessId).path,
-      tags: ['checkout', 'cart'],
-      section: 'customer',
+      name: "Warenkorb",
+      path: this._navigationService.getCheckoutReviewPath(
+        this.applicationService.activatedProcessId,
+      ).path,
+      tags: ["checkout", "cart"],
+      section: "customer",
     });
   }
 
   async removeBreadcrumbs() {
     const checkoutDummyCrumbs = await this.breadcrumb
-      .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['checkout', 'cart', 'dummy'])
+      .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, [
+        "checkout",
+        "cart",
+        "dummy",
+      ])
       .pipe(first())
       .toPromise();
     checkoutDummyCrumbs.forEach(async (crumb) => {
@@ -304,32 +360,49 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
     this._store.notificationsControl = undefined;
   }
 
-  openDummyModal({ data, changeDataFromCart = false }: { data?: CheckoutDummyData; changeDataFromCart?: boolean }) {
+  openDummyModal({
+    data,
+    changeDataFromCart = false,
+  }: {
+    data?: CheckoutDummyData;
+    changeDataFromCart?: boolean;
+  }) {
     this.uiModal.open({
       content: CheckoutDummyComponent,
       data: { ...data, changeDataFromCart },
     });
   }
 
-  changeDummyItem({ shoppingCartItem }: { shoppingCartItem: ShoppingCartItemDTO }) {
+  changeDummyItem({
+    shoppingCartItem,
+  }: {
+    shoppingCartItem: ShoppingCartItemDTO;
+  }) {
     this.openDummyModal({ data: shoppingCartItem, changeDataFromCart: true });
   }
 
-  async changeItem({ shoppingCartItem }: { shoppingCartItem: ShoppingCartItemDTO }) {
+  async changeItem({
+    shoppingCartItem,
+  }: {
+    shoppingCartItem: ShoppingCartItemDTO;
+  }) {
     this._purchaseOptionsModalService.open({
       processId: this.applicationService.activatedProcessId,
       items: [shoppingCartItem],
-      type: 'update',
+      type: "update",
     });
   }
 
   async openPrintModal() {
-    let shoppingCart = await this.shoppingCart$.pipe(first()).toPromise();
+    const shoppingCart = await this.shoppingCart$.pipe(first()).toPromise();
     this.uiModal.open({
       content: PrintModalComponent,
       data: {
-        printerType: 'Label',
-        print: (printer) => this.domainPrinterService.printCart({ cartId: shoppingCart.id, printer }).toPromise(),
+        printerType: "Label",
+        print: (printer) =>
+          this.domainPrinterService
+            .printCart({ cartId: shoppingCart.id, printer })
+            .toPromise(),
       } as PrintModalData,
       config: {
         panelClass: [],
@@ -351,7 +424,8 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
 
     this.loadingOnQuantityChangeById$.next(shoppingCartItem.id);
 
-    const shoppingCartItemPrice = shoppingCartItem?.availability?.price?.value?.value;
+    const shoppingCartItemPrice =
+      shoppingCartItem?.availability?.price?.value?.value;
     const orderType = shoppingCartItem?.features?.orderType;
     let availability: AvailabilityDTO;
 
@@ -360,7 +434,7 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
 
       if (orderType) {
         switch (orderType) {
-          case 'Rücklage':
+          case "Rücklage":
             availability = await this.availabilityService
               .getTakeAwayAvailability({
                 item: {
@@ -369,12 +443,13 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
                   price: shoppingCartItem.availability.price,
                 },
                 quantity,
+                branch,
               })
               .toPromise();
 
             // this.setQuantityError(shoppingCartItem, availability, availability?.inStock < quantity);
             break;
-          case 'Abholung':
+          case "Abholung":
             availability = await this.availabilityService
               .getPickUpAvailability({
                 branch,
@@ -388,7 +463,7 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
               .pipe(map((av) => av[0]))
               .toPromise();
             break;
-          case 'Versand':
+          case "Versand":
             availability = await this.availabilityService
               .getDeliveryAvailability({
                 item: {
@@ -400,7 +475,7 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
               })
               .toPromise();
             break;
-          case 'DIG-Versand':
+          case "DIG-Versand":
             availability = await this.availabilityService
               .getDigDeliveryAvailability({
                 item: {
@@ -412,7 +487,7 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
               })
               .toPromise();
             break;
-          case 'B2B-Versand':
+          case "B2B-Versand":
             availability = await this.availabilityService
               .getB2bDeliveryAvailability({
                 item: {
@@ -424,7 +499,7 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
               })
               .toPromise();
             break;
-          case 'Download':
+          case "Download":
             availability = await this.availabilityService
               .getDownloadAvailability({
                 item: {
@@ -463,7 +538,11 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
           shoppingCartItemId: shoppingCartItem.id,
           update: {
             quantity,
-            availability: this.compareDeliveryAndCatalogPrice(updateAvailability, orderType, shoppingCartItemPrice),
+            availability: this.compareDeliveryAndCatalogPrice(
+              updateAvailability,
+              orderType,
+              shoppingCartItemPrice,
+            ),
           },
         })
         .toPromise();
@@ -483,8 +562,15 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
   }
 
   // Bei unbekannten Kunden und DIG Bestellung findet ein Vergleich der Preise statt
-  compareDeliveryAndCatalogPrice(availability: AvailabilityDTO, orderType: string, shoppingCartItemPrice: number) {
-    if (['Versand', 'DIG-Versand'].includes(orderType) && shoppingCartItemPrice < availability?.price?.value?.value) {
+  compareDeliveryAndCatalogPrice(
+    availability: AvailabilityDTO,
+    orderType: string,
+    shoppingCartItemPrice: number,
+  ) {
+    if (
+      ["Versand", "DIG-Versand"].includes(orderType) &&
+      shoppingCartItemPrice < availability?.price?.value?.value
+    ) {
       return {
         ...availability,
         price: {
@@ -507,7 +593,10 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
         .pipe(
           first(),
           switchMap((customerFeatures) => {
-            return this.domainCheckoutService.canSetCustomer({ processId, customerFeatures });
+            return this.domainCheckoutService.canSetCustomer({
+              processId,
+              customerFeatures,
+            });
           }),
         )
         .toPromise();
@@ -524,24 +613,31 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
     this._purchaseOptionsModalService.open({
       processId: this.applicationService.activatedProcessId,
       items: shoppingCartItems,
-      type: 'update',
+      type: "update",
     });
   }
 
   async changeAddress() {
     const processId = this.applicationService.activatedProcessId;
-    const customer = await this.domainCheckoutService.getBuyer({ processId }).pipe(first()).toPromise();
+    const customer = await this.domainCheckoutService
+      .getBuyer({ processId })
+      .pipe(first())
+      .toPromise();
     if (!customer) {
       this.navigateToCustomerSearch(processId);
       return;
     }
     const customerId = customer.source;
-    const nav = this._customerSearchNavigation.detailsRoute({ processId, customerId });
+    const nav = this._customerSearchNavigation.detailsRoute({
+      processId,
+      customerId,
+    });
     this.router.navigate(nav.path);
   }
 
   async order() {
-    const shoppingCartItemsWithoutOrderType = await this.shoppingCartItemsWithoutOrderType$.pipe(first()).toPromise();
+    const shoppingCartItemsWithoutOrderType =
+      await this.shoppingCartItemsWithoutOrderType$.pipe(first()).toPromise();
 
     if (shoppingCartItemsWithoutOrderType?.length > 0) {
       this.showPurchasingListModal(shoppingCartItemsWithoutOrderType);
@@ -549,7 +645,10 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
     }
 
     const processId = this.applicationService.activatedProcessId;
-    const customer = await this.domainCheckoutService.getBuyer({ processId }).pipe(first()).toPromise();
+    const customer = await this.domainCheckoutService
+      .getBuyer({ processId })
+      .pipe(first())
+      .toPromise();
     if (!customer) {
       this.navigateToCustomerSearch(processId);
     } else {
@@ -557,33 +656,42 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
         this.showOrderButtonSpinner = true;
         // Ticket #3287 Um nur E-Mail und SMS Benachrichtigungen zu setzen und um alle anderen Benachrichtigungskanäle wie z.B. Brief zu deaktivieren
         await this._store.onNotificationChange();
-        const orders = await this.domainCheckoutService.completeCheckout({ processId }).toPromise();
-        const orderIds = orders.map((order) => order.id).join(',');
+        const orders = await this.domainCheckoutService
+          .completeCheckout({ processId })
+          .toPromise();
+        const orderIds = orders.map((order) => order.id).join(",");
         this._store.orderCompleted.next();
         await this.patchProcess(processId);
-        await this._navigationService.getCheckoutSummaryPath({ processId, orderIds }).navigate();
+        await this._navigationService
+          .getCheckoutSummaryPath({ processId, orderIds })
+          .navigate();
       } catch (error) {
         const response = error?.error;
-        let message: string = response?.message ?? '';
+        let message: string = response?.message ?? "";
 
-        if (response?.invalidProperties && Object.values(response?.invalidProperties)?.length) {
-          message += `\n${Object.values(response.invalidProperties).join('\n')}`;
+        if (
+          response?.invalidProperties &&
+          Object.values(response?.invalidProperties)?.length
+        ) {
+          message += `\n${Object.values(response.invalidProperties).join("\n")}`;
         }
 
         if (message?.length) {
           this.uiModal.open({
             content: UiMessageModalComponent,
-            title: 'Hinweis',
+            title: "Hinweis",
             data: { message: message.trim() },
           });
         } else if (error) {
-          this.uiModal.error('Fehler beim abschließen der Bestellung', error);
+          this.uiModal.error("Fehler beim abschließen der Bestellung", error);
         }
 
         if (error.status === 409) {
           this._store.orderCompleted.next();
           await this.patchProcess(processId);
-          await this._navigationService.getCheckoutSummaryPath({ processId }).navigate();
+          await this._navigationService
+            .getCheckoutSummaryPath({ processId })
+            .navigate();
         }
       } finally {
         this.showOrderButtonSpinner = false;
@@ -593,11 +701,14 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
   }
 
   async patchProcess(processId: number) {
-    const process = await this.applicationService.getProcessById$(processId).pipe(first()).toPromise();
+    const process = await this.applicationService
+      .getProcessById$(processId)
+      .pipe(first())
+      .toPromise();
     if (process) {
       this.applicationService.patchProcess(process.id, {
         name: `${process.name} Bestellbestätigung`,
-        type: 'cart-checkout',
+        type: "cart-checkout",
       });
     }
   }

apps/isa-app/src/page/checkout/checkout-review/details/checkout-review-details.component.html

@@ -2,56 +2,61 @@
   Überprüfen Sie die Details.
 </h1>
 
-<ng-container *ngIf="buyer$ | async; let buyer">
-  <div *ngIf="!(showAddresses$ | async)" class="flex flex-row items-start justify-between p-5">
-    <div class="flex flex-row flex-wrap pr-4">
-      <ng-container *ngIf="getNameFromBuyer(buyer); let name">
-        <div class="mr-3">{{ name.label }}</div>
-        <div class="font-bold">{{ name.value }}</div>
-      </ng-container>
-    </div>
-
-    <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
-  </div>
-</ng-container>
-
-<ng-container *ngIf="showNotificationChannels$ | async">
-  <form class="pb-4" *ngIf="control" [formGroup]="control">
-    <shared-notification-channel-control
-      [communicationDetails]="communicationDetails$ | async"
-      (channelActionEvent)="updateNotifications($event)"
-      [channelActionName]="'Speichern'"
-      [channelActionLoading]="notificationChannelLoading$ | async"
-      formGroupName="notificationChannel"
-    ></shared-notification-channel-control>
-  </form>
-</ng-container>
-
-<ng-container *ngIf="payer$ | async; let payer">
-  <div *ngIf="showAddresses$ | async" class="flex flex-row items-start justify-between p-5 pt-0">
-    <div class="flex flex-row flex-wrap pr-4" data-address-type="Rechnungsadresse" data-which="Rechnungsadresse">
-      <div class="mr-3" data-what="title">Rechnungsadresse</div>
-      <div class="font-bold" data-what="address">
-        {{ payer | payerAddress }}
+@if (buyer$ | async; as buyer) {
+  @if (!(showAddresses$ | async)) {
+    <div class="flex flex-row items-start justify-between p-5">
+      <div class="flex flex-row flex-wrap pr-4">
+        @if (getNameFromBuyer(buyer); as name) {
+          <div class="mr-3">{{ name.label }}</div>
+          <div class="font-bold">{{ name.value }}</div>
+        }
       </div>
+      <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
     </div>
+  }
+}
 
-    <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
-  </div>
-</ng-container>
+@if (showNotificationChannels$ | async) {
+  @if (control) {
+    <form class="pb-4" [formGroup]="control">
+      <shared-notification-channel-control
+        [communicationDetails]="communicationDetails$ | async"
+        (channelActionEvent)="updateNotifications($event)"
+        [channelActionName]="'Speichern'"
+        [channelActionLoading]="notificationChannelLoading$ | async"
+        formGroupName="notificationChannel"
+      ></shared-notification-channel-control>
+    </form>
+  }
+}
 
-<ng-container *ngIf="payer$ | async; let payer">
-  <div *ngIf="showAddresses$ | async" class="flex flex-row items-start justify-between px-5">
-    <div class="flex flex-row flex-wrap pr-4" data-address-type="Lieferadresse" data-which="Lieferadresse">
-      <div class="mr-3" data-what="title">Lieferadresse</div>
-      <div class="font-bold" data-what="address">
-        {{ shippingAddress$ | async | shippingAddress }}
+@if (payer$ | async; as payer) {
+  @if (showAddresses$ | async) {
+    <div class="flex flex-row items-start justify-between p-5 pt-0">
+      <div class="flex flex-row flex-wrap pr-4" data-address-type="Rechnungsadresse" data-which="Rechnungsadresse">
+        <div class="mr-3" data-what="title">Rechnungsadresse</div>
+        <div class="font-bold" data-what="address">
+          {{ payer | payerAddress }}
+        </div>
       </div>
+      <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
     </div>
+  }
+}
 
-    <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
-  </div>
-</ng-container>
+@if (payer$ | async; as payer) {
+  @if (showAddresses$ | async) {
+    <div class="flex flex-row items-start justify-between px-5">
+      <div class="flex flex-row flex-wrap pr-4" data-address-type="Lieferadresse" data-which="Lieferadresse">
+        <div class="mr-3" data-what="title">Lieferadresse</div>
+        <div class="font-bold" data-what="address">
+          {{ shippingAddress$ | async | shippingAddress }}
+        </div>
+      </div>
+      <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">Ändern</button>
+    </div>
+  }
+}
 
 <page-special-comment
   class="mb-6 mt-4"

apps/isa-app/src/page/checkout/checkout-review/shopping-cart-item/shopping-cart-item.component.html

@@ -1,18 +1,21 @@
 <div class="item-thumbnail">
   <a [routerLink]="productSearchDetailsPath" [queryParams]="{ main_qs: item?.product?.ean }">
-    <img loading="lazy" *ngIf="item?.product?.ean | productImage; let thumbnailUrl" [src]="thumbnailUrl" [alt]="item?.product?.name" />
+    @if (item?.product?.ean | productImage; as thumbnailUrl) {
+      <img loading="lazy" [src]="thumbnailUrl" [alt]="item?.product?.name" />
+    }
   </a>
 </div>
 
 <div class="item-contributors">
-  <a
-    *ngFor="let contributor of contributors$ | async; let last = last"
-    [routerLink]="productSearchResultsPath"
-    [queryParams]="{ main_qs: contributor, main_author: 'author' }"
-    (click)="$event?.stopPropagation()"
-  >
-    {{ contributor }}{{ last ? '' : ';' }}
-  </a>
+  @for (contributor of contributors$ | async; track contributor; let last = $last) {
+    <a
+      [routerLink]="productSearchResultsPath"
+      [queryParams]="{ main_qs: contributor, main_author: 'author' }"
+      (click)="$event?.stopPropagation()"
+      >
+      {{ contributor }}{{ last ? '' : ';' }}
+    </a>
+  }
 </div>
 
 <div
@@ -21,86 +24,106 @@
   [class.text-p1]="item?.product?.name?.length >= 50 || !isTablet"
   [class.text-p2]="item?.product?.name?.length >= 60 && isTablet"
   [class.text-p3]="item?.product?.name?.length >= 100"
->
+  >
   <a [routerLink]="productSearchDetailsPath" [queryParams]="{ main_qs: item?.product?.ean }">{{ item?.product?.name }}</a>
 </div>
 
-<div class="item-format" *ngIf="item?.product?.format && item?.product?.formatDetail">
-  <img
-    *ngIf="item?.product?.format !== '--'"
-    src="assets/images/Icon_{{ item?.product?.format }}.svg"
-    [alt]="item?.product?.formatDetail"
-  />
-  {{ item?.product?.formatDetail }}
-</div>
+@if (item?.product?.format && item?.product?.formatDetail) {
+  <div class="item-format">
+    @if (item?.product?.format !== '--') {
+      <img
+        src="assets/images/Icon_{{ item?.product?.format }}.svg"
+        [alt]="item?.product?.formatDetail"
+        />
+    }
+    {{ item?.product?.formatDetail }}
+  </div>
+}
 
 <div class="item-info text-p2">
   <div class="mb-1">{{ item?.product?.manufacturer | substr: 25 }} | {{ item?.product?.ean }}</div>
   <div class="mb-1">
     {{ item?.product?.volume }}
-    <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
+    @if (item?.product?.volume && item?.product?.publicationDate) {
+      <span>|</span>
+    }
     {{ item?.product?.publicationDate | date }}
   </div>
-  <div *ngIf="notAvailable$ | async">
-    <span class="text-brand item-date">Nicht verfügbar</span>
-  </div>
-
-  <shared-skeleton-loader class="w-40" *ngIf="refreshingAvailabilit$ | async; else avaTmplt"></shared-skeleton-loader>
-
-  <ng-template #avaTmplt>
-    <div class="item-date" [class.availability-changed]="estimatedShippingDateChanged$ | async" *ngIf="orderType === 'Abholung'">
-      Abholung ab {{ item?.availability?.estimatedShippingDate | date }}
+  @if (notAvailable$ | async) {
+    <div>
+      <span class="text-brand item-date">Nicht verfügbar</span>
     </div>
-    <div
-      class="item-date"
-      [class.availability-changed]="estimatedShippingDateChanged$ | async"
-      *ngIf="orderType === 'Versand' || orderType === 'B2B-Versand' || orderType === 'DIG-Versand'"
-    >
-      <ng-container *ngIf="item?.availability?.estimatedDelivery; else estimatedShippingDate">
-        Zustellung zwischen {{ (item?.availability?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }}
-        und
-        {{ (item?.availability?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
-      </ng-container>
-      <ng-template #estimatedShippingDate>Versand {{ item?.availability?.estimatedShippingDate | date }}</ng-template>
-    </div>
-  </ng-template>
+  }
 
-  <div class="item-availability-message" *ngIf="olaError$ | async">Artikel nicht verfügbar</div>
+  @if (refreshingAvailabilit$ | async) {
+    <shared-skeleton-loader class="w-40"></shared-skeleton-loader>
+  } @else {
+    @if (orderType === 'Abholung') {
+      <div class="item-date" [class.availability-changed]="estimatedShippingDateChanged$ | async">
+        Abholung ab {{ item?.availability?.estimatedShippingDate | date }}
+      </div>
+    }
+    @if (orderType === 'Versand' || orderType === 'B2B-Versand' || orderType === 'DIG-Versand') {
+      <div
+        class="item-date"
+        [class.availability-changed]="estimatedShippingDateChanged$ | async"
+        >
+        @if (item?.availability?.estimatedDelivery) {
+          Zustellung zwischen {{ (item?.availability?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }}
+          und
+          {{ (item?.availability?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
+        } @else {
+          Versand {{ item?.availability?.estimatedShippingDate | date }}
+        }
+      </div>
+    }
+  }
+
+
+  @if (olaError$ | async) {
+    <div class="item-availability-message">Artikel nicht verfügbar</div>
+  }
 </div>
 
 <div class="item-price-stock flex flex-col">
   <div class="text-p2 font-bold">{{ item?.availability?.price?.value?.value | currency: 'EUR' : 'code' }}</div>
   <div class="text-p2 font-normal">
-    <ui-quantity-dropdown
-      *ngIf="!(isDummy$ | async); else quantityDummy"
-      [ngModel]="item?.quantity"
-      (ngModelChange)="onChangeQuantity($event)"
-      [showSpinner]="(loadingOnQuantityChangeById$ | async) === item?.id"
-      [disabled]="(loadingOnItemChangeById$ | async) === item?.id"
-      [range]="quantityRange$ | async"
-    ></ui-quantity-dropdown>
-    <ng-template #quantityDummy>
+    @if (!(isDummy$ | async)) {
+      <ui-quantity-dropdown
+        [ngModel]="item?.quantity"
+        (ngModelChange)="onChangeQuantity($event)"
+        [showSpinner]="(loadingOnQuantityChangeById$ | async) === item?.id"
+        [disabled]="(loadingOnItemChangeById$ | async) === item?.id"
+        [range]="quantityRange$ | async"
+      ></ui-quantity-dropdown>
+    } @else {
       <div class="mt-2">{{ item?.quantity }}x</div>
-    </ng-template>
-  </div>
-  <div class="quantity-error" *ngIf="quantityError">
-    {{ quantityError }}
+    }
   </div>
+  @if (quantityError) {
+    <div class="quantity-error">
+      {{ quantityError }}
+    </div>
+  }
 </div>
 
-<div class="actions" *ngIf="orderType !== 'Download'">
-  <button
-    [disabled]="(loadingOnQuantityChangeById$ | async) === item?.id || (loadingOnItemChangeById$ | async) === item?.id"
-    (click)="onChangeItem()"
-    *ngIf="!(hasOrderType$ | async)"
-  >
-    <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id">Lieferweg auswählen</ui-spinner>
-  </button>
-  <button
-    [disabled]="(loadingOnQuantityChangeById$ | async) === item?.id || (loadingOnItemChangeById$ | async) === item?.id"
-    (click)="onChangeItem()"
-    *ngIf="canEdit$ | async"
-  >
-    <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id">Lieferweg ändern</ui-spinner>
-  </button>
-</div>
+@if (orderType !== 'Download') {
+  <div class="actions">
+    @if (!(hasOrderType$ | async)) {
+      <button
+        [disabled]="(loadingOnQuantityChangeById$ | async) === item?.id || (loadingOnItemChangeById$ | async) === item?.id"
+        (click)="onChangeItem()"
+        >
+        <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id">Lieferweg auswählen</ui-spinner>
+      </button>
+    }
+    @if (canEdit$ | async) {
+      <button
+        [disabled]="(loadingOnQuantityChangeById$ | async) === item?.id || (loadingOnItemChangeById$ | async) === item?.id"
+        (click)="onChangeItem()"
+        >
+        <ui-spinner [show]="(loadingOnItemChangeById$ | async) === item?.id">Lieferweg ändern</ui-spinner>
+      </button>
+    }
+  </div>
+}

apps/isa-app/src/page/checkout/checkout-review/special-comment/special-comment.component.html

@@ -24,11 +24,15 @@
     ></textarea>
 
     <div class="comment-actions py-4">
-      <button type="reset" class="clear pl-4" *ngIf="!disabled && !!value" (click)="clear(); triggerResize()">
-        <shared-icon icon="close" [size]="24"></shared-icon>
-      </button>
+      @if (!disabled && !!value) {
+        <button type="reset" class="clear pl-4" (click)="clear(); triggerResize()">
+          <shared-icon icon="close" [size]="24"></shared-icon>
+        </button>
+      }
     </div>
   </div>
 
-  <div *ngIf="!(hasPayer || hasBuyer)" class="text-p3">Zur Info: Sie haben dem Warenkorb noch keinen Kunden hinzugefügt.</div>
+  @if (!(hasPayer || hasBuyer)) {
+    <div class="text-p3">Zur Info: Sie haben dem Warenkorb noch keinen Kunden hinzugefügt.</div>
+  }
 </div>

apps/isa-app/src/page/checkout/checkout-summary/checkout-summary.component.html

@@ -7,66 +7,63 @@
     <h1 class="text-center text-h2 my-1 font-bold">Bestellbestätigung</h1>
     <p class="text-center text-p1 mb-10">Nachfolgend erhalten Sie die Übersicht Ihrer Bestellung.</p>
 
-    <ng-container *ngFor="let displayOrder of displayOrders$ | async; let i = index; let orderLast = last">
-      <ng-container *ngIf="i === 0">
+    @for (displayOrder of displayOrders$ | async; track displayOrder; let i = $index; let orderLast = $last) {
+      @if (i === 0) {
         <div class="flex flex-row items-center bg-white shadow-card min-h-[3.3125rem]">
           <div class="text-h3 font-bold px-5 py-[0.875rem]">
             {{ displayOrder?.buyer | buyerName }}
           </div>
         </div>
-
         <hr />
-      </ng-container>
-
+      }
       <div class="flex flex-row items-center bg-[#F5F7FA] min-h-[3.3125rem]">
         <div class="flex flex-row items-center justify-center px-5 py-[0.875rem]">
-          <shared-icon
-            *ngIf="(displayOrder?.items)[0]?.features?.orderType !== 'Dummy'"
-            class="mr-2"
-            [size]="(displayOrder?.items)[0]?.features?.orderType === 'B2B-Versand' ? 36 : 24"
-            [icon]="(displayOrder?.items)[0]?.features?.orderType"
-          ></shared-icon>
+          @if ((displayOrder?.items)[0]?.features?.orderType !== 'Dummy') {
+            <shared-icon
+              class="mr-2"
+              [size]="(displayOrder?.items)[0]?.features?.orderType === 'B2B-Versand' ? 36 : 24"
+              [icon]="(displayOrder?.items)[0]?.features?.orderType"
+            ></shared-icon>
+          }
           <p class="text-p1 font-bold mr-3">{{ (displayOrder?.items)[0]?.features?.orderType }}</p>
-          <div
-            *ngIf="
-              (displayOrder?.items)[0]?.features?.orderType === 'Abholung' || (displayOrder?.items)[0]?.features?.orderType === 'Rücklage';
-              else shippingAddress
-            "
-          >
-            {{ displayOrder.targetBranch?.name }}, {{ displayOrder.targetBranch | branchAddress }}
-          </div>
-          <ng-template #shippingAddress>
+          @if (
+            (displayOrder?.items)[0]?.features?.orderType === 'Abholung' || (displayOrder?.items)[0]?.features?.orderType === 'Rücklage') {
+            <div
+              >
+              {{ displayOrder.targetBranch?.name }}, {{ displayOrder.targetBranch | branchAddress }}
+            </div>
+          } @else {
             {{ displayOrder.shippingAddress | branchAddress }}
-          </ng-template>
-          <div *ngIf="(displayOrder?.items)[0]?.features?.orderType === 'Download'">
-            | {{ displayOrder.buyer?.communicationDetails?.email }}
-          </div>
+          }
+          @if ((displayOrder?.items)[0]?.features?.orderType === 'Download') {
+            <div>
+              | {{ displayOrder.buyer?.communicationDetails?.email }}
+            </div>
+          }
         </div>
       </div>
-
       <hr />
-
       <div class="flex flex-row justify-between items-center">
         <div class="flex flex-col px-5 py-4 bg-white" [attr.data-order-type]="(displayOrder?.items)[0]?.features?.orderType">
           <div class="flex flex-row justify-between items-center mb-[0.375rem]">
             <div class="flex flex-row">
               <span class="w-32">Vorgangs-ID</span>
-              <ng-container *ngIf="customer$ | async; let customer">
-                <a
-                  data-which="Vorgangs-ID"
-                  data-what="link"
-                  *ngIf="customer$ | async; let customer"
-                  class="font-bold text-[#0556B4] no-underline"
-                  [routerLink]="['/kunde', processId, 'customer', 'search', customer?.id, 'orders', displayOrder.id]"
-                  [queryParams]="{ main_qs: customer?.customerNumber, filter_customertype: '' }"
-                >
-                  {{ displayOrder.orderNumber }}
-                </a>
-              </ng-container>
+              @if (customer$ | async; as customer) {
+                @if (customer$ | async; as customer) {
+                  <a
+                    data-which="Vorgangs-ID"
+                    data-what="link"
+                    class="font-bold text-[#0556B4] no-underline"
+                    [routerLink]="['/kunde', processId, 'customer', 'search', customer?.id, 'orders', displayOrder.id]"
+                    [queryParams]="{ main_qs: customer?.customerNumber, filter_customertype: '' }"
+                    >
+                    {{ displayOrder.orderNumber }}
+                  </a>
+                }
+              }
               <ui-spinner class="text-[#0556B4] h-4 w-4" [show]="!(customer$ | async)"></ui-spinner>
             </div>
           </div>
-
           <div class="flex flex-row justify-between items-center">
             <div class="flex flex-row">
               <span class="w-32">Bestelldatum</span>
@@ -74,14 +71,13 @@
             </div>
           </div>
         </div>
-
         <div class="mr-4">
           <button
             (click)="expanded[i] = !expanded[i]"
             type="button"
             class="text-[#0556B4] font-bold flex flex-row items-center justify-center"
             [class.flex-row-reverse]="!expanded[i]"
-          >
+            >
             <shared-icon
               class="mr-1"
               icon="arrow-back"
@@ -93,135 +89,139 @@
           </button>
         </div>
       </div>
-
-      <ng-container *ngFor="let order of displayOrder.items; let last = last">
-        <ng-container *ngIf="expanded[i]">
+      @for (order of displayOrder.items; track order; let last = $last) {
+        @if (expanded[i]) {
           <div
             class="page-checkout-summary__items-tablet px-5 pb-[1.875rem] bg-white"
             [class.page-checkout-summary__items]="isDesktop$ | async"
             [class.last]="last"
-          >
+            >
             <div class="page-checkout-summary__items-thumbnail flex flex-row">
               <a [routerLink]="getProductSearchDetailsPath(order?.product?.ean)" [queryParams]="getProductSearchDetailsQueryParams(order)">
                 <img class="w-[3.125rem] max-h-20 mr-2" [src]="order.product?.ean | productImage: 195 : 315 : true" />
               </a>
             </div>
-
             <div class="page-checkout-summary__items-title whitespace-nowrap overflow-ellipsis overflow-hidden">
               <a
                 class="font-bold no-underline text-[#0556B4]"
                 [routerLink]="getProductSearchDetailsPath(order?.product?.ean)"
                 [queryParams]="getProductSearchDetailsQueryParams(order)"
-              >
+                >
                 {{ order?.product?.name }}
               </a>
             </div>
-
-            <div class="page-checkout-summary__items-ssc" *ngIf="(order?.subsetItems)[0]; let subsetItem">
-              <span class="mr-2">{{ subsetItem.supplierName }}</span>
-              <span *ngIf="subsetItem?.ssc && subsetItem?.sscText" class="font-bold border-l border-black pl-2">
-                {{ subsetItem.ssc }} - {{ subsetItem.sscText }}
-              </span>
-            </div>
-
+            @if ((order?.subsetItems)[0]; as subsetItem) {
+              <div class="page-checkout-summary__items-ssc">
+                <span class="mr-2">{{ subsetItem.supplierName }}</span>
+                @if (subsetItem?.ssc && subsetItem?.sscText) {
+                  <span class="font-bold border-l border-black pl-2">
+                    {{ subsetItem.ssc }} - {{ subsetItem.sscText }}
+                  </span>
+                }
+              </div>
+            }
             <div class="page-checkout-summary__items-quantity font-bold justify-self-end">
               <span>{{ order.quantity }}x</span>
             </div>
-
             <div class="page-checkout-summary__items-price font-bold justify-self-end">
               <span>{{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }}</span>
             </div>
-
             <div class="page-checkout-summary__items-delivery product-details">
-              <div class="delivery-row" [ngSwitch]="order?.features?.orderType">
-                <ng-container *ngSwitchCase="'Abholung'">
-                  <span class="order-type">
-                    Abholung ab {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}
-                    <ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"></ng-container>
-                  </span>
-                </ng-container>
-                <ng-container *ngSwitchCase="'Rücklage'">
-                  <span class="order-type">
-                    {{ order?.features?.orderType }}
-                    <ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"></ng-container>
-                  </span>
-                </ng-container>
-                <ng-container *ngSwitchCase="['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(order?.features?.orderType) > -1">
-                  <ng-container *ngIf="(order?.subsetItems)[0]?.estimatedDelivery; else estimatedShippingDate">
+              <div class="delivery-row">
+                @switch (order?.features?.orderType) {
+                  @case ('Abholung') {
                     <span class="order-type">
-                      Zustellung zwischen
-                      {{ ((order?.subsetItems)[0]?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
-                      {{ ((order?.subsetItems)[0]?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
+                      Abholung ab {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}
+                      <ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"></ng-container>
                     </span>
-                  </ng-container>
-                  <ng-template #estimatedShippingDate>
-                    <span class="order-type">Versanddatum {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
-                  </ng-template>
-                </ng-container>
-                <ng-container *ngSwitchDefault>
-                  <span class="order-type">{{ order?.features?.orderType }}</span>
-                </ng-container>
+                  }
+                  @case ('Rücklage') {
+                    <span class="order-type">
+                      {{ order?.features?.orderType }}
+                      <ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"></ng-container>
+                    </span>
+                  }
+                  @case (['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(order?.features?.orderType) > -1) {
+                    @if ((order?.subsetItems)[0]?.estimatedDelivery) {
+                      <span class="order-type">
+                        Zustellung zwischen
+                        {{ ((order?.subsetItems)[0]?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
+                        {{ ((order?.subsetItems)[0]?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
+                      </span>
+                    } @else {
+                      <span class="order-type">Versanddatum {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
+                    }
+                  }
+                  @default {
+                    <span class="order-type">{{ order?.features?.orderType }}</span>
+                  }
+                }
               </div>
             </div>
           </div>
-        </ng-container>
-
-        <hr *ngIf="last" />
-      </ng-container>
-      <ng-container *ngIf="orderLast">
+        }
+        @if (last) {
+          <hr />
+        }
+      }
+      @if (orderLast) {
         <div class="flex flex-row justify-between items-center min-h-[3.3125rem] bg-white px-5 py-4 rounded-b">
-          <span *ngIf="totalReadingPoints$ | async; let totalReadingPoints" class="text-p2 font-bold">
-            {{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints }} Lesepunkte
-          </span>
-
+          @if (totalReadingPoints$ | async; as totalReadingPoints) {
+            <span class="text-p2 font-bold">
+              {{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints }} Lesepunkte
+            </span>
+          }
           <div class="flex flex-row items-center justify-center">
             <div class="text-p1 font-bold flex flex-row items-center">
               <div class="mr-1">Gesamtsumme {{ totalPrice$ | async | currency: ' ' }} {{ totalPriceCurrency$ | async }}</div>
             </div>
-
-            <div
-              class="bg-brand text-white font-bold text-p1 outline-none border-none rounded-full px-6 py-3 ml-2"
-              *ngIf="(takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)"
-            >
-              <button class="cta-goods-out" (click)="navigateToShelfOut()">Zur Warenausgabe</button>
-            </div>
+            @if ((takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)) {
+              <div
+                class="bg-brand text-white font-bold text-p1 outline-none border-none rounded-full px-6 py-3 ml-2"
+                >
+                <button class="cta-goods-out" (click)="navigateToShelfOut()">Zur Warenausgabe</button>
+              </div>
+            }
           </div>
         </div>
-      </ng-container>
-    </ng-container>
+      }
+    }
   </div>
 </div>
 
 <ng-template #abholfrist let-order="order">
-  <div *ngIf="!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]" class="inline-flex">
-    <button [uiOverlayTrigger]="deadlineDatepicker" #deadlineDatepickerTrigger="uiOverlayTrigger" class="flex flex-row items-center">
-      <span class="mx-[0.625rem] font-normal">bis</span>
-      <strong class="border-r border-[#AEB7C1] pr-4">
-        {{ ((order?.subsetItems)[0]?.preferredPickUpDate | date: 'dd.MM.yy') || 'TT.MM.JJJJ' }}
-      </strong>
-
-      <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
-    </button>
-    <ui-datepicker
-      #deadlineDatepicker
-      yPosition="below"
-      xPosition="after"
-      [xOffset]="8"
-      [min]="minDateDatepicker"
-      [disabledDaysOfWeek]="[0]"
-      [(selected)]="selectedDate"
-    >
-      <div #content class="grid grid-flow-row gap-2">
-        <button
-          class="rounded-full font-bold text-white bg-brand py-px-15 px-px-25"
-          (click)="updatePreferredPickUpDate(undefined, selectedDate); deadlineDatepickerTrigger.close()"
+  @if (!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]) {
+    <div class="inline-flex">
+      <button [uiOverlayTrigger]="deadlineDatepicker" #deadlineDatepickerTrigger="uiOverlayTrigger" class="flex flex-row items-center">
+        <span class="mx-[0.625rem] font-normal">bis</span>
+        <strong class="border-r border-[#AEB7C1] pr-4">
+          {{ ((order?.subsetItems)[0]?.preferredPickUpDate | date: 'dd.MM.yy') || 'TT.MM.JJJJ' }}
+        </strong>
+        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+      </button>
+      <ui-datepicker
+        #deadlineDatepicker
+        yPosition="below"
+        xPosition="after"
+        [xOffset]="8"
+        [min]="minDateDatepicker"
+        [disabledDaysOfWeek]="[0]"
+        [(selected)]="selectedDate"
         >
-          Für den Warenkorb festlegen
-        </button>
-      </div>
-    </ui-datepicker>
-  </div>
-  <div class="fetching" *ngIf="!!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]"></div>
+        <div #content class="grid grid-flow-row gap-2">
+          <button
+            class="rounded-full font-bold text-white bg-brand py-px-15 px-px-25"
+            (click)="updatePreferredPickUpDate(undefined, selectedDate); deadlineDatepickerTrigger.close()"
+            >
+            Für den Warenkorb festlegen
+          </button>
+        </div>
+      </ui-datepicker>
+    </div>
+  }
+  @if (!!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]) {
+    <div class="fetching"></div>
+  }
 </ng-template>
 
 <div class="relative">
@@ -232,17 +232,18 @@
       type="button"
       class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14 flex flex-row items-center justify-center print-button"
       (click)="printOrderConfirmation()"
-    >
+      >
       <ui-spinner class="min-h-4 min-w-4" [show]="isPrinting$ | async">Bestellbestätigung drucken</ui-spinner>
     </button>
 
-    <button
-      *ngIf="hasAbholung$ | async"
-      type="button"
-      class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14"
-      (click)="sendOrderConfirmation()"
-    >
-      Bestellbestätigung senden
-    </button>
+    @if (hasAbholung$ | async) {
+      <button
+        type="button"
+        class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14"
+        (click)="sendOrderConfirmation()"
+        >
+        Bestellbestätigung senden
+      </button>
+    }
   </div>
 </div>

apps/isa-app/src/page/checkout/checkout-summary/checkout-summary.component.ts

@@ -15,7 +15,11 @@ import { CrmCustomerService } from '@domain/crm';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DomainOmsService } from '@domain/oms';
 import { DomainCatalogService } from '@domain/catalog';
-import { DisplayOrderDTO, DisplayOrderItemDTO, DisplayOrderItemSubsetDTO } from '@generated/swagger/oms-api';
+import {
+  DisplayOrderDTO,
+  DisplayOrderItemDTO,
+  DisplayOrderItemSubsetDTO,
+} from '@generated/swagger/oms-api';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
 import { DomainPrinterService } from '@domain/printer';
@@ -49,45 +53,73 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   private _onDestroy$ = new Subject<void>();
   processId = Date.now();
   selectedDate = this.dateAdapter.today();
-  minDateDatepicker = this.dateAdapter.addCalendarDays(this.dateAdapter.today(), -1);
+  minDateDatepicker = this.dateAdapter.addCalendarDays(
+    this.dateAdapter.today(),
+    -1,
+  );
 
-  updatingPreferredPickUpDate$ = new BehaviorSubject<Record<string, string>>({});
+  updatingPreferredPickUpDate$ = new BehaviorSubject<Record<string, string>>(
+    {},
+  );
 
-  displayOrders$ = combineLatest([this.domainCheckoutService.getOrders(), this._route.params]).pipe(
+  displayOrders$ = combineLatest([
+    this.domainCheckoutService.getOrders(),
+    this._route.params,
+  ]).pipe(
     map(([orders, params]) => {
       let filteredOrders: DisplayOrderDTO[] = [];
       if (params?.orderIds) {
         const orderIds: string[] = params.orderIds.split(',');
-        filteredOrders = orders.filter((order) => orderIds.find((id) => Number(id) === order.id));
+        filteredOrders = orders.filter((order) =>
+          orderIds.find((id) => Number(id) === order.id),
+        );
       } else {
         return filteredOrders;
       }
 
       // Ticket #4228 Für die korrekte Gruppierung der Items bei gleichem Bestellziel (Aufsplitten von Abholung und Rücklage)
       const ordersWithMultipleFeatures = filteredOrders.filter((order) =>
-        order.items.find((item) => item.features.orderType !== order.features.orderType),
+        order.items.find(
+          (item) => item.features.orderType !== order.features.orderType,
+        ),
       );
 
       if (ordersWithMultipleFeatures) {
         for (let orderWithMultipleFeatures of ordersWithMultipleFeatures) {
           if (orderWithMultipleFeatures?.items?.length > 1) {
-            const itemsWithOrderFeature = orderWithMultipleFeatures.items.filter(
-              (item) => item.features.orderType === orderWithMultipleFeatures.features.orderType,
-            );
-            const itemsWithDifferentOrderFeature = orderWithMultipleFeatures.items.filter(
-              (item) => item.features.orderType !== orderWithMultipleFeatures.features.orderType,
-            );
+            const itemsWithOrderFeature =
+              orderWithMultipleFeatures.items.filter(
+                (item) =>
+                  item.features.orderType ===
+                  orderWithMultipleFeatures.features.orderType,
+              );
+            const itemsWithDifferentOrderFeature =
+              orderWithMultipleFeatures.items.filter(
+                (item) =>
+                  item.features.orderType !==
+                  orderWithMultipleFeatures.features.orderType,
+              );
 
-            filteredOrders = [...filteredOrders.filter((order) => order.id !== orderWithMultipleFeatures.id)];
+            filteredOrders = [
+              ...filteredOrders.filter(
+                (order) => order.id !== orderWithMultipleFeatures.id,
+              ),
+            ];
 
             if (itemsWithOrderFeature?.length > 0) {
-              filteredOrders = [...filteredOrders, { ...orderWithMultipleFeatures, items: itemsWithOrderFeature }];
+              filteredOrders = [
+                ...filteredOrders,
+                { ...orderWithMultipleFeatures, items: itemsWithOrderFeature },
+              ];
             }
 
             if (itemsWithDifferentOrderFeature?.length > 0) {
               filteredOrders = [
                 ...filteredOrders,
-                { ...orderWithMultipleFeatures, items: itemsWithDifferentOrderFeature },
+                {
+                  ...orderWithMultipleFeatures,
+                  items: itemsWithDifferentOrderFeature,
+                },
               ];
             }
           }
@@ -97,7 +129,9 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
       return filteredOrders?.map((order) => {
         return {
           ...order,
-          items: [...order.items]?.sort((a, b) => a.product?.name.localeCompare(b.product?.name)),
+          items: [...order.items]?.sort((a, b) =>
+            a.product?.name.localeCompare(b.product?.name),
+          ),
         };
       });
     }),
@@ -105,14 +139,23 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   );
 
   hasAbholung$ = this.displayOrders$.pipe(
-    map((displayOrders) => displayOrders.filter((order) => order.features?.orderType === 'Abholung')?.length > 0),
+    map(
+      (displayOrders) =>
+        displayOrders.filter(
+          (order) => order.features?.orderType === 'Abholung',
+        )?.length > 0,
+    ),
   );
 
   totalItemCount$ = this.displayOrders$.pipe(
     map((displayOrders) =>
       displayOrders.reduce(
         (total, displayOrder) =>
-          total + displayOrder?.items?.reduce((subTotal, order) => subTotal + order?.quantity, 0),
+          total +
+          displayOrder?.items?.reduce(
+            (subTotal, order) => subTotal + order?.quantity,
+            0,
+          ),
         0,
       ),
     ),
@@ -121,7 +164,10 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   totalReadingPoints$ = this.displayOrders$.pipe(
     switchMap((displayOrders) => {
       const items = displayOrders
-        .reduce<DisplayOrderItemDTO[]>((items, order) => [...items, ...order.items], [])
+        .reduce<DisplayOrderItemDTO[]>(
+          (items, order) => [...items, ...order.items],
+          [],
+        )
         .map((i) => {
           if (i?.product?.catalogProductNumber) {
             return {
@@ -135,7 +181,14 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
       if (items.length !== 0) {
         return this.domainCatalogService
           .getPromotionPoints({ items })
-          .pipe(map((response) => Object.values(response.result).reduce((sum, points) => sum + points, 0)));
+          .pipe(
+            map((response) =>
+              Object.values(response.result).reduce(
+                (sum, points) => sum + points,
+                0,
+              ),
+            ),
+          );
       } else {
         return NEVER;
       }
@@ -147,7 +200,11 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
       displayOrders.reduce(
         (total, displayOrder) =>
           total +
-          displayOrder?.items?.reduce((subTotal, order) => subTotal + order?.price?.value?.value * order.quantity, 0),
+          displayOrder?.items?.reduce(
+            (subTotal, order) =>
+              subTotal + order?.price?.value?.value * order.quantity,
+            0,
+          ),
         0,
       ),
     ),
@@ -162,22 +219,33 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   containsDeliveryOrder$ = this.displayOrders$.pipe(
     map(
       (displayOrders) =>
-        displayOrders.filter((o) => ['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(o.features?.orderType) > -1)
-          ?.length > 0,
+        displayOrders.filter(
+          (o) =>
+            ['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(
+              o.features?.orderType,
+            ) > -1,
+        )?.length > 0,
     ),
   );
 
   customer$ = this.displayOrders$.pipe(
-    switchMap((o) => this.customerService.getCustomers(o[0].buyerNumber, { take: 5 })),
+    switchMap((o) =>
+      this.customerService.getCustomers(o[0].buyerNumber, { take: 5 }),
+    ),
     map((customers) => customers.result[0]),
     shareReplay(),
   );
 
-  isB2BCustomer$ = this.customer$.pipe(map((customer) => customer?.features?.find((f) => f.key === 'b2b') != null));
+  isB2BCustomer$ = this.customer$.pipe(
+    map((customer) => customer?.features?.find((f) => f.key === 'b2b') != null),
+  );
 
   takeNowOrders$ = this.displayOrders$.pipe(
     map((displayOrders) =>
-      displayOrders.filter((o) => o.items.find((oi) => oi.features?.orderType === 'Rücklage') != null),
+      displayOrders.filter(
+        (o) =>
+          o.items.find((oi) => oi.features?.orderType === 'Rücklage') != null,
+      ),
     ),
   );
 
@@ -210,7 +278,9 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     private _cdr: ChangeDetectorRef,
   ) {
     this.breadcrumb
-      .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['checkout'])
+      .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, [
+        'checkout',
+      ])
       .pipe(first())
       .subscribe(async (crumbs) => {
         for await (const crumb of crumbs) {
@@ -264,7 +334,8 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   getProductSearchDetailsQueryParams(item: DisplayOrderItemDTO) {
     return {
       main_qs: item?.product?.ean,
-      filter_format: item?.features?.orderType === 'Download' ? 'eb;dl' : undefined,
+      filter_format:
+        item?.features?.orderType === 'Download' ? 'eb;dl' : undefined,
     };
   }
 
@@ -274,9 +345,14 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     try {
       const items = item ? [item] : await this.getAllOrderItems();
       const subsetItems = items
-        .filter((item) => ['Rücklage', 'Abholung'].includes(item.features.orderType))
+        .filter((item) =>
+          ['Rücklage', 'Abholung'].includes(item.features.orderType),
+        )
         // .flatMap((item) => item.subsetItems);
-        .reduce<DisplayOrderItemSubsetDTO[]>((acc, item) => [...acc, ...item.subsetItems], []);
+        .reduce<DisplayOrderItemSubsetDTO[]>(
+          (acc, item) => [...acc, ...item.subsetItems],
+          [],
+        );
       subsetItems.forEach((item) => (data[`${item.id}`] = date?.toISOString()));
 
       try {
@@ -310,7 +386,10 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
 
   async getAllOrderItems() {
     const orders = await this.displayOrders$.pipe(first()).toPromise();
-    return orders.reduce<DisplayOrderItemDTO[]>((agg, order) => [...agg, ...order.items], []);
+    return orders.reduce<DisplayOrderItemDTO[]>(
+      (agg, order) => [...agg, ...order.items],
+      [],
+    );
   }
 
   async updateDisplayOrderItem(item: DisplayOrderItemDTO) {
@@ -322,9 +401,16 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     if (takeNowOrders.length != 1) return;
 
     try {
-      await this.router.navigate(this._shelfOutNavigationService.listRoute({ processId: Date.now() }).path, {
-        queryParams: { main_qs: takeNowOrders[0].orderNumber, filter_supplier_id: '16' },
-      });
+      await this.router.navigate(
+        this._shelfOutNavigationService.listRoute({ processId: Date.now() })
+          .path,
+        {
+          queryParams: {
+            main_qs: takeNowOrders[0].orderNumber,
+            filter_supplier_id: '16',
+          },
+        },
+      );
     } catch (e) {
       console.error(e);
     }
@@ -344,7 +430,8 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
       .pipe(
         first(),
         map((printers) => {
-          if (Array.isArray(printers)) return printers.find((printer) => printer.selected === true);
+          if (Array.isArray(printers))
+            return printers.find((printer) => printer.selected === true);
         }),
       )
       .toPromise();
@@ -362,10 +449,16 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
                 const result = await this.domainPrinterService
                   .printOrder({ orderIds: orders.map((o) => o.id), printer })
                   .toPromise();
-                this._toaster.open({ type: 'success', message: 'Bestellbestätigung wurde gedruckt' });
+                this._toaster.open({
+                  type: 'success',
+                  message: 'Bestellbestätigung wurde gedruckt',
+                });
                 return result;
               } catch (error) {
-                this._toaster.open({ type: 'danger', message: 'Fehler beim Drucken der Bestellbestätigung' });
+                this._toaster.open({
+                  type: 'danger',
+                  message: 'Fehler beim Drucken der Bestellbestätigung',
+                });
               } finally {
                 this.isPrinting$.next(false);
               }
@@ -381,12 +474,21 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     } else {
       try {
         const result = await this.domainPrinterService
-          .printOrder({ orderIds: orders.map((o) => o.id), printer: selectedPrinter.key })
+          .printOrder({
+            orderIds: orders.map((o) => o.id),
+            printer: selectedPrinter.key,
+          })
           .toPromise();
-        this._toaster.open({ type: 'success', message: 'Bestellbestätigung wurde gedruckt' });
+        this._toaster.open({
+          type: 'success',
+          message: 'Bestellbestätigung wurde gedruckt',
+        });
         return result;
       } catch (error) {
-        this._toaster.open({ type: 'danger', message: 'Fehler beim Drucken der Bestellbestätigung' });
+        this._toaster.open({
+          type: 'danger',
+          message: 'Fehler beim Drucken der Bestellbestätigung',
+        });
       } finally {
         this.isPrinting$.next(false);
       }

apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-item/customer-order-details-item.component.html

@@ -1,35 +1,35 @@
-<ng-container *ngIf="orderItem$ | async; let orderItem">
+@if (orderItem$ | async; as orderItem) {
   <div #features class="page-customer-order-details-item__features">
-    <ng-container *ngIf="orderItem?.features?.prebooked">
+    @if (orderItem?.features?.prebooked) {
       <img [uiOverlayTrigger]="prebookedTooltip" src="/assets/images/tag_icon_preorder.svg" [alt]="orderItem?.features?.prebooked" />
       <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #prebookedTooltip [closeable]="true">
         Artikel wird für Sie vorgemerkt.
       </ui-tooltip>
-    </ng-container>
-    <ng-container *ngIf="notificationsSent$ | async; let notificationsSent">
-      <ng-container *ngIf="notificationsSent?.NOTIFICATION_EMAIL">
+    }
+    @if (notificationsSent$ | async; as notificationsSent) {
+      @if (notificationsSent?.NOTIFICATION_EMAIL) {
         <img [uiOverlayTrigger]="emailTooltip" src="/assets/images/email_bookmark.svg" />
         <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #emailTooltip [closeable]="true">
           Per E-Mail benachrichtigt
           <br />
-          <ng-container *ngFor="let notification of notificationsSent?.NOTIFICATION_EMAIL">
+          @for (notification of notificationsSent?.NOTIFICATION_EMAIL; track notification) {
             {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
             <br />
-          </ng-container>
+          }
         </ui-tooltip>
-      </ng-container>
-      <ng-container *ngIf="notificationsSent?.NOTIFICATION_SMS">
+      }
+      @if (notificationsSent?.NOTIFICATION_SMS) {
         <img [uiOverlayTrigger]="smsTooltip" src="/assets/images/sms_bookmark.svg" />
         <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #smsTooltip [closeable]="true">
           Per SMS benachrichtigt
           <br />
-          <ng-container *ngFor="let notification of notificationsSent?.NOTIFICATION_SMS">
+          @for (notification of notificationsSent?.NOTIFICATION_SMS; track notification) {
             {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
             <br />
-          </ng-container>
+          }
         </ui-tooltip>
-      </ng-container>
-    </ng-container>
+      }
+    }
   </div>
   <div class="page-customer-order-details-item__item-container">
     <div class="page-customer-order-details-item__thumbnail">
@@ -42,169 +42,190 @@
           #elementDistance="uiElementDistance"
           [style.max-width.px]="elementDistance.distanceChange | async"
           class="flex flex-col"
-        >
+          >
           <div class="font-normal mb-[0.375rem]">{{ orderItem.product?.contributors }}</div>
           <div>{{ orderItem.product?.name }}</div>
         </h3>
         <div class="history-wrapper flex flex-col items-end justify-center">
           <button class="cta-history text-p1" (click)="historyClick.emit(orderItem)">Historie</button>
-
-          <input
-            *ngIf="selectable$ | async"
-            [ngModel]="selected$ | async"
-            (ngModelChange)="setSelected($event)"
-            class="isa-select-bullet mt-4"
-            type="checkbox"
-          />
+          @if (selectable$ | async) {
+            <input
+              [ngModel]="selected$ | async"
+              (ngModelChange)="setSelected($event)"
+              class="isa-select-bullet mt-4"
+              type="checkbox"
+              />
+          }
         </div>
       </div>
       <div class="detail">
         <div class="label">Menge</div>
         <div class="value">
-          <ng-container *ngIf="!(canChangeQuantity$ | async)">{{ orderItem?.quantity }}x</ng-container>
-          <ui-quantity-dropdown
-            *ngIf="canChangeQuantity$ | async"
-            [showTrash]="false"
-            [range]="orderItem?.quantity"
-            [(ngModel)]="quantity"
-            [showSpinner]="false"
-          ></ui-quantity-dropdown>
+          @if (!(canChangeQuantity$ | async)) {
+            {{ orderItem?.quantity }}x
+          }
+          @if (canChangeQuantity$ | async) {
+            <ui-quantity-dropdown
+              [showTrash]="false"
+              [range]="orderItem?.quantity"
+              [(ngModel)]="quantity"
+              [showSpinner]="false"
+            ></ui-quantity-dropdown>
+          }
           <span class="overall-quantity">(von {{ orderItem?.overallQuantity }})</span>
         </div>
       </div>
-      <div class="detail" *ngIf="!!orderItem.product?.formatDetail">
-        <div class="label">Format</div>
-        <div class="value">
-          <img
-            *ngIf="orderItem?.product?.format && orderItem?.product?.format !== 'UNKNOWN'"
-            class="format-icon"
-            [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'"
-            alt="format icon"
-          />
-          <span>{{ orderItem.product?.formatDetail }}</span>
+      @if (!!orderItem.product?.formatDetail) {
+        <div class="detail">
+          <div class="label">Format</div>
+          <div class="value">
+            @if (orderItem?.product?.format && orderItem?.product?.format !== 'UNKNOWN') {
+              <img
+                class="format-icon"
+                [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'"
+                alt="format icon"
+                />
+            }
+            <span>{{ orderItem.product?.formatDetail }}</span>
+          </div>
         </div>
-      </div>
-      <div class="detail" *ngIf="!!orderItem.product?.ean">
-        <div class="label">ISBN/EAN</div>
-        <div class="value">{{ orderItem.product?.ean }}</div>
-      </div>
-      <div class="detail" *ngIf="orderItem.price !== undefined">
-        <div class="label">Preis</div>
-        <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
-      </div>
-      <div class="detail" *ngIf="!!orderItem.retailPrice?.vat?.inPercent">
-        <div class="label">MwSt</div>
-        <div class="value">{{ orderItem.retailPrice?.vat?.inPercent }}%</div>
-      </div>
-
+      }
+      @if (!!orderItem.product?.ean) {
+        <div class="detail">
+          <div class="label">ISBN/EAN</div>
+          <div class="value">{{ orderItem.product?.ean }}</div>
+        </div>
+      }
+      @if (orderItem.price !== undefined) {
+        <div class="detail">
+          <div class="label">Preis</div>
+          <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
+        </div>
+      }
+      @if (!!orderItem.retailPrice?.vat?.inPercent) {
+        <div class="detail">
+          <div class="label">MwSt</div>
+          <div class="value">{{ orderItem.retailPrice?.vat?.inPercent }}%</div>
+        </div>
+      }
       <hr class="border-[#EDEFF0] border-t-2 my-4" />
-
-      <div class="detail" *ngIf="orderItem.supplier">
-        <div class="label">Lieferant</div>
-        <div class="value">{{ orderItem.supplier }}</div>
-      </div>
-      <div class="detail" *ngIf="!!orderItem.ssc || !!orderItem.sscText">
-        <div class="label">Meldenummer</div>
-        <div class="value">{{ orderItem.ssc }} - {{ orderItem.sscText }}</div>
-      </div>
-      <div class="detail" *ngIf="!!orderItem.targetBranch">
-        <div class="label">Zielfiliale</div>
-        <div class="value">{{ orderItem.targetBranch }}</div>
-      </div>
+      @if (orderItem.supplier) {
+        <div class="detail">
+          <div class="label">Lieferant</div>
+          <div class="value">{{ orderItem.supplier }}</div>
+        </div>
+      }
+      @if (!!orderItem.ssc || !!orderItem.sscText) {
+        <div class="detail">
+          <div class="label">Meldenummer</div>
+          <div class="value">{{ orderItem.ssc }} - {{ orderItem.sscText }}</div>
+        </div>
+      }
+      @if (!!orderItem.targetBranch) {
+        <div class="detail">
+          <div class="label">Zielfiliale</div>
+          <div class="value">{{ orderItem.targetBranch }}</div>
+        </div>
+      }
       <div class="detail">
         <div class="label">
-          <ng-container
-            *ngIf="
-              orderItemFeature(orderItem) === 'Versand' ||
-              orderItemFeature(orderItem) === 'B2B-Versand' ||
-              orderItemFeature(orderItem) === 'DIG-Versand'
-            "
-          >
+          @if (
+            orderItemFeature(orderItem) === 'Versand' ||
+            orderItemFeature(orderItem) === 'B2B-Versand' ||
+            orderItemFeature(orderItem) === 'DIG-Versand'
+            ) {
             {{ orderItem?.estimatedDelivery ? 'Lieferung zwischen' : 'Lieferung ab' }}
-          </ng-container>
-          <ng-container *ngIf="orderItemFeature(orderItem) === 'Abholung' || orderItemFeature(orderItem) === 'Rücklage'">
+          }
+          @if (orderItemFeature(orderItem) === 'Abholung' || orderItemFeature(orderItem) === 'Rücklage') {
             Abholung ab
-          </ng-container>
+          }
         </div>
-
-        <ng-container *ngIf="!!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate">
+        @if (!!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate) {
           <div class="value bg-[#D8DFE5] rounded w-max px-2">
-            <ng-container *ngIf="!!orderItem?.estimatedDelivery; else estimatedShippingDate">
+            @if (!!orderItem?.estimatedDelivery) {
               {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und
               {{ orderItem?.estimatedDelivery?.stop | date: 'dd.MM.yy' }}
-            </ng-container>
+            } @else {
+              @if (!!orderItem?.estimatedShippingDate) {
+                {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
+              }
+            }
           </div>
-        </ng-container>
-
-        <ng-template #estimatedShippingDate>
-          <ng-container *ngIf="!!orderItem?.estimatedShippingDate">
-            {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
-          </ng-container>
-        </ng-template>
+        }
       </div>
-      <div class="page-customer-order-details-item__tracking-details" *ngIf="getOrderItemTrackingData(orderItem); let trackingData">
-        <div class="label">{{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}</div>
-        <ng-container *ngFor="let tracking of trackingData">
-          <ng-container *ngIf="tracking.trackingProvider === 'DHL' && !isNative; else noTrackingLink">
-            <a class="value text-[#0556B4]" [href]="getTrackingNumberLink(tracking.trackingNumber)" target="_blank">
-              {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}
-            </a>
-          </ng-container>
-          <ng-template #noTrackingLink>
-            <p class="value">{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}</p>
-          </ng-template>
-        </ng-container>
-      </div>
-
+      @if (getOrderItemTrackingData(orderItem); as trackingData) {
+        <div class="page-customer-order-details-item__tracking-details">
+          <div class="label">{{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}</div>
+          @for (tracking of trackingData; track tracking) {
+            @if (tracking.trackingProvider === 'DHL' && !isNative) {
+              <a class="value text-[#0556B4]" [href]="getTrackingNumberLink(tracking.trackingNumber)" target="_blank">
+                {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}
+              </a>
+            } @else {
+              <p class="value">{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}</p>
+            }
+          }
+        </div>
+      }
       <hr class="border-[#EDEFF0] border-t-2 my-4" />
-
-      <div class="detail" *ngIf="!!orderItem?.compartmentCode">
-        <div class="label">Abholfachnr.</div>
-        <div class="value">{{ orderItem?.compartmentCode }}</div>
-      </div>
+      @if (!!orderItem?.compartmentCode) {
+        <div class="detail">
+          <div class="label">Abholfachnr.</div>
+          <div class="value">{{ orderItem?.compartmentCode }}</div>
+        </div>
+      }
       <div class="detail">
         <div class="label">Vormerker</div>
         <div class="value">{{ orderItem.isPrebooked ? 'Ja' : 'Nein' }}</div>
       </div>
-
       <hr class="border-[#EDEFF0] border-t-2 my-4" />
-
-      <div class="detail" *ngIf="!!orderItem.paymentProcessing">
-        <div class="label">Zahlungsweg</div>
-        <div class="value">{{ orderItem.paymentProcessing || '-' }}</div>
-      </div>
-      <div class="detail" *ngIf="!!orderItem.paymentType">
-        <div class="label">Zahlungsart</div>
-        <div class="value">{{ orderItem.paymentType | paymentType }}</div>
-      </div>
-
-      <h4 class="receipt-header" *ngIf="receiptCount$ | async; let count">
-        {{ count > 1 ? 'Belege' : 'Beleg' }}
-      </h4>
-      <ng-container *ngFor="let receipt of receipts$ | async">
-        <div class="detail" *ngIf="!!receipt?.receiptNumber">
-          <div class="label">Belegnummer</div>
-          <div class="value">{{ receipt?.receiptNumber }}</div>
+      @if (!!orderItem.paymentProcessing) {
+        <div class="detail">
+          <div class="label">Zahlungsweg</div>
+          <div class="value">{{ orderItem.paymentProcessing || '-' }}</div>
         </div>
-        <div class="detail" *ngIf="!!receipt?.printedDate">
-          <div class="label">Erstellt am</div>
-          <div class="value">{{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+      }
+      @if (!!orderItem.paymentType) {
+        <div class="detail">
+          <div class="label">Zahlungsart</div>
+          <div class="value">{{ orderItem.paymentType | paymentType }}</div>
         </div>
-        <div class="detail" *ngIf="!!receipt?.receiptText">
-          <div class="label">Rechnungstext</div>
-          <div class="value">{{ receipt?.receiptText || '-' }}</div>
-        </div>
-        <div class="detail" *ngIf="!!receipt?.receiptType">
-          <div class="label">Belegart</div>
-          <div class="value">
-            {{ receipt?.receiptType === 1 ? 'Lieferschein' : receipt?.receiptType === 64 ? 'Zahlungsbeleg' : '-' }}
+      }
+      @if (receiptCount$ | async; as count) {
+        <h4 class="receipt-header">
+          {{ count > 1 ? 'Belege' : 'Beleg' }}
+        </h4>
+      }
+      @for (receipt of receipts$ | async; track receipt) {
+        @if (!!receipt?.receiptNumber) {
+          <div class="detail">
+            <div class="label">Belegnummer</div>
+            <div class="value">{{ receipt?.receiptNumber }}</div>
           </div>
-        </div>
-      </ng-container>
-
+        }
+        @if (!!receipt?.printedDate) {
+          <div class="detail">
+            <div class="label">Erstellt am</div>
+            <div class="value">{{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+          </div>
+        }
+        @if (!!receipt?.receiptText) {
+          <div class="detail">
+            <div class="label">Rechnungstext</div>
+            <div class="value">{{ receipt?.receiptText || '-' }}</div>
+          </div>
+        }
+        @if (!!receipt?.receiptType) {
+          <div class="detail">
+            <div class="label">Belegart</div>
+            <div class="value">
+              {{ receipt?.receiptType === 1 ? 'Lieferschein' : receipt?.receiptType === 64 ? 'Zahlungsbeleg' : '-' }}
+            </div>
+          </div>
+        }
+      }
       <div class="page-customer-order-details-item__comment flex flex-col items-start mt-[1.625rem]">
         <div class="label mb-[0.375rem]">Anmerkung</div>
-
         <div class="flex flex-row w-full">
           <textarea
             matInput
@@ -222,27 +243,28 @@
             [formControl]="specialCommentControl"
             [class.inactive]="!specialCommentControl.dirty"
           ></textarea>
-
           <div class="comment-actions">
-            <button
-              type="reset"
-              class="clear"
-              *ngIf="!!specialCommentControl.value?.length"
-              (click)="specialCommentControl.setValue(''); saveSpecialComment(); triggerResize()"
-            >
-              <shared-icon icon="close" [size]="24"></shared-icon>
-            </button>
-            <button
-              class="cta-save"
-              type="submit"
-              *ngIf="specialCommentControl?.enabled && specialCommentControl.dirty"
-              (click)="saveSpecialComment()"
-            >
-              Speichern
-            </button>
+            @if (!!specialCommentControl.value?.length) {
+              <button
+                type="reset"
+                class="clear"
+                (click)="specialCommentControl.setValue(''); saveSpecialComment(); triggerResize()"
+                >
+                <shared-icon icon="close" [size]="24"></shared-icon>
+              </button>
+            }
+            @if (specialCommentControl?.enabled && specialCommentControl.dirty) {
+              <button
+                class="cta-save"
+                type="submit"
+                (click)="saveSpecialComment()"
+                >
+                Speichern
+              </button>
+            }
           </div>
         </div>
       </div>
     </div>
   </div>
-</ng-container>
+}

apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-tags/customer-order-details-tags.component.html

@@ -1,19 +1,20 @@
 <div class="page-customer-order-details-tags__wrapper">
-  <button
-    class="page-customer-order-details-tags__tag"
-    type="button"
-    [class.selected]="tag === (selected$ | async) && !inputFocus.focused"
-    *ngFor="let tag of defaultTags"
-    (click)="setCompartmentInfo(tag)"
-  >
-    {{ tag }}
-  </button>
+  @for (tag of defaultTags; track tag) {
+    <button
+      class="page-customer-order-details-tags__tag"
+      type="button"
+      [class.selected]="tag === (selected$ | async) && !inputFocus.focused"
+      (click)="setCompartmentInfo(tag)"
+      >
+      {{ tag }}
+    </button>
+  }
   <button
     (click)="inputFocus.focus()"
     type="button"
     class="page-customer-order-details-tags__tag"
     [class.selected]="(inputValue$ | async) === (selected$ | async) && (inputValue$ | async)"
-  >
+    >
     <input
       #inputFocus="uiFocus"
       uiFocus
@@ -23,6 +24,6 @@
       placeholder="..."
       [size]="controlSize$ | async"
       maxlength="15"
-    />
+      />
   </button>
 </div>

apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-tags/customer-order-details-tags.component.ts

@@ -1,4 +1,4 @@
-import { NgFor, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, forwardRef } from '@angular/core';
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { UiCommonModule } from '@ui/common';
@@ -14,7 +14,7 @@ import { PickUpShelfDetailsTagsComponent } from '../../../pickup-shelf/shared/pi
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-pickup-shelf-details-tags' },
   standalone: true,
-  imports: [NgFor, UiCommonModule, FormsModule, AsyncPipe, MatomoModule],
+  imports: [UiCommonModule, FormsModule, AsyncPipe, MatomoModule],
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PickUpShelfDetailsTagsComponent), multi: true },
   ],

apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details.component.html

@@ -4,39 +4,44 @@
     (handleAction)="handleAction($event)"
     [order]="order$ | async"
   ></page-customer-order-details-header>
-  <page-customer-order-details-item
-    class="mb-px-2"
-    *ngFor="let item of items$ | async"
-    [orderItem]="item"
-    [order]="order$ | async"
-    [selected]="true"
-    (historyClick)="navigateToHistoryPage($event)"
-    (specialCommentChanged)="onSpecialCommentChange()"
-  ></page-customer-order-details-item>
-  <page-customer-order-details-tags *ngIf="showTagsComponent$ | async"></page-customer-order-details-tags>
+  @for (item of items$ | async; track item) {
+    <page-customer-order-details-item
+      class="mb-px-2"
+      [orderItem]="item"
+      [order]="order$ | async"
+      [selected]="true"
+      (historyClick)="navigateToHistoryPage($event)"
+      (specialCommentChanged)="onSpecialCommentChange()"
+    ></page-customer-order-details-item>
+  }
+  @if (showTagsComponent$ | async) {
+    <page-customer-order-details-tags></page-customer-order-details-tags>
+  }
 </div>
 <div class="page-customer-order-details__action-wrapper">
-  <button
-    [disabled]="addToPreviousCompartmentActionDisabled$ | async"
-    *ngIf="addToPreviousCompartmentAction$ | async; let action"
-    class="cta-action shadow-action"
-    [class.cta-action-primary]="action.selected"
-    [class.cta-action-secondary]="!action.selected"
-    (click)="handleAction(action, { compartmentCode: latestCompartmentCode, compartmentInfo: latestCompartmentInfo })"
-  >
-    <ui-spinner [show]="(changeActionLoader$ | async) === action.command">
-      {{ latestCompartmentCode$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen
-    </ui-spinner>
-  </button>
+  @if (addToPreviousCompartmentAction$ | async; as action) {
+    <button
+      [disabled]="addToPreviousCompartmentActionDisabled$ | async"
+      class="cta-action shadow-action"
+      [class.cta-action-primary]="action.selected"
+      [class.cta-action-secondary]="!action.selected"
+      (click)="handleAction(action, { compartmentCode: latestCompartmentCode, compartmentInfo: latestCompartmentInfo })"
+      >
+      <ui-spinner [show]="(changeActionLoader$ | async) === action.command">
+        {{ latestCompartmentCode$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen
+      </ui-spinner>
+    </button>
+  }
 
-  <button
-    [disabled]="actionsDisabled$ | async"
-    class="cta-action shadow-action"
-    [class.cta-action-primary]="action.selected"
-    [class.cta-action-secondary]="!action.selected"
-    *ngFor="let action of mainActions$ | async"
-    (click)="handleAction(action)"
-  >
-    <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
-  </button>
+  @for (action of mainActions$ | async; track action) {
+    <button
+      [disabled]="actionsDisabled$ | async"
+      class="cta-action shadow-action"
+      [class.cta-action-primary]="action.selected"
+      [class.cta-action-secondary]="!action.selected"
+      (click)="handleAction(action)"
+      >
+      <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
+    </button>
+  }
 </div>

apps/isa-app/src/page/customer-order/customer-order-edit/customer-order-edit.component.html

@@ -1,3 +1,5 @@
-<div *ngIf="items$ | async; let items">
-  <shared-goods-in-out-order-edit (navigation)="navigateToDetailsPage($event)" [items]="items"></shared-goods-in-out-order-edit>
-</div>
+@if (items$ | async; as items) {
+  <div>
+    <shared-goods-in-out-order-edit (navigation)="navigateToDetailsPage($event)" [items]="items"></shared-goods-in-out-order-edit>
+  </div>
+}

apps/isa-app/src/page/customer-order/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.html

@@ -1,19 +1,19 @@
 <div class="hidden desktop-large:block" [class.show-filter]="showFilter">
-  <ng-container *ngIf="filter$ | async; let filter">
+  @if (filter$ | async; as filter) {
     <div class="customer-orders-search-filter-content">
       <div class="w-full flex flex-row justify-end items-center">
         <button (click)="clearFilter(filter)" class="text-[#0556B4] p-4">Alle Filter entfernen</button>
-        <a
-          *ngIf="showFilterClose$ | async"
-          class="text-black p-4 outline-none border-none bg-transparent"
-          [routerLink]="closeFilterRoute"
-          (click)="showFilter = false"
-          queryParamsHandling="preserve"
-        >
-          <shared-icon icon="close" [size]="25"></shared-icon>
-        </a>
+        @if (showFilterClose$ | async) {
+          <a
+            class="text-black p-4 outline-none border-none bg-transparent"
+            [routerLink]="closeFilterRoute"
+            (click)="showFilter = false"
+            queryParamsHandling="preserve"
+            >
+            <shared-icon icon="close" [size]="25"></shared-icon>
+          </a>
+        }
       </div>
-
       <div class="customer-orders-search-filter-content-main -mt-14 desktop-small:-mt-8 desktop-large:-mt-12">
         <h1 class="text-h3 text-[1.625rem] font-bold text-center pt-6 pb-10">Filter</h1>
         <shared-filter
@@ -22,20 +22,18 @@
           (search)="applyFilter(filter)"
           [hint]="message$ | async"
           [scanner]="true"
-        >
+          >
           <page-order-branch-id-input *sharedFilterCustomInput="'order_branch_id'; let input" [input]="input"></page-order-branch-id-input>
         </shared-filter>
       </div>
-
       <div class="cta-wrapper">
         <button class="cta-reset-filter" (click)="resetFilter()" [disabled]="loading$ | async">Filter zurücksetzen</button>
-
         <button class="cta-apply-filter" (click)="applyFilter(filter)" [disabled]="(loading$ | async) || !hasSelectedOptions(filter)">
           <ui-spinner [show]="loading$ | async">Filter anwenden</ui-spinner>
         </button>
       </div>
     </div>
-  </ng-container>
+  }
 </div>
 <div class="desktop-large:hidden" [class.hidden]="showFilter">
   <page-customer-order-search-main (showFilter)="showFilter = true"></page-customer-order-search-main>

apps/isa-app/src/page/customer-order/customer-order-search/search-main/customer-order-search-main.component.html

@@ -11,53 +11,57 @@
     <br />
     oder scannen Sie die Kundenkarte.
   </p>
-  <ng-container *ngIf="filter$ | async; let filter">
-    <shared-filter-filter-group-main
-      class="mb-8 w-full"
-      *ngIf="!(isDesktop$ | async)"
-      [inputGroup]="filter?.filter | group: 'main'"
-    ></shared-filter-filter-group-main>
+  @if (filter$ | async; as filter) {
+    @if (!(isDesktop$ | async)) {
+      <shared-filter-filter-group-main
+        class="mb-8 w-full"
+        [inputGroup]="filter?.filter | group: 'main'"
+      ></shared-filter-filter-group-main>
+    }
     <div class="flex flex-row px-12 justify-center desktop-large:px-0">
-      <shared-filter-input-group-main
-        class="block w-full mr-3 desktop-large:mx-auto"
-        *ngIf="filter?.input | group: 'main'; let inputGroup"
-        [inputGroup]="inputGroup"
-        [loading]="loading$ | async"
-        (search)="search(filter)"
-        [hint]="message$ | async"
-        [scanner]="true"
-      ></shared-filter-input-group-main>
-      <button
-        *ngIf="!(isDesktop$ | async)"
-        (click)="showFilter.emit()"
-        class="page-search-main__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
-        [class.active]="hasFilter$ | async"
-        type="button"
-      >
-        <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
-        Filter
-      </button>
+      @if (filter?.input | group: 'main'; as inputGroup) {
+        <shared-filter-input-group-main
+          class="block w-full mr-3 desktop-large:mx-auto"
+          [inputGroup]="inputGroup"
+          [loading]="loading$ | async"
+          (search)="search(filter)"
+          [hint]="message$ | async"
+          [scanner]="true"
+        ></shared-filter-input-group-main>
+      }
+      @if (!(isDesktop$ | async)) {
+        <button
+          (click)="showFilter.emit()"
+          class="page-search-main__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
+          [class.active]="hasFilter$ | async"
+          type="button"
+          >
+          <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
+          Filter
+        </button>
+      }
     </div>
-
     <div
       class="flex flex-col items-start ml-12 desktop-large:ml-8 py-6 bg-white overflow-hidden h-[calc(100%-21rem)] desktop-large:h-[calc(100%-15rem)]"
-    >
+      >
       <h3 class="text-p3 font-bold mb-3">Deine letzten Suchanfragen</h3>
       <ul class="flex flex-col justify-start overflow-hidden overflow-y-scroll items-start m-0 p-0 bg-white w-full">
-        <li class="list-none pb-3" *ngFor="let query of history$ | async">
-          <button
-            class="flex flex-row items-center outline-none border-none bg-white text-black text-p2 m-0 p-0"
-            (click)="setQueryHistory(filter, query)"
-          >
-            <shared-icon
-              class="flex w-8 h-8 justify-center items-center mr-3 rounded-full text-black bg-[#edeff0]"
-              icon="magnify"
-              [size]="20"
-            ></shared-icon>
-            <p class="m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[25rem]">{{ query }}</p>
-          </button>
-        </li>
+        @for (query of history$ | async; track query) {
+          <li class="list-none pb-3">
+            <button
+              class="flex flex-row items-center outline-none border-none bg-white text-black text-p2 m-0 p-0"
+              (click)="setQueryHistory(filter, query)"
+              >
+              <shared-icon
+                class="flex w-8 h-8 justify-center items-center mr-3 rounded-full text-black bg-[#edeff0]"
+                icon="magnify"
+                [size]="20"
+              ></shared-icon>
+              <p class="m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[25rem]">{{ query }}</p>
+            </button>
+          </li>
+        }
       </ul>
     </div>
-  </ng-container>
+  }
 </div>

apps/isa-app/src/page/customer-order/customer-order-search/search-results/customer-order-item.component.html

@@ -5,19 +5,20 @@
   [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''"
   [queryParams]="queryParams"
   (click)="isDesktopLarge ? scrollIntoView() : ''"
->
+  >
   <div
     class="page-customer-order-item__item-grid-container"
     [class.page-customer-order-item__item-grid-container-main]="primaryOutletActive"
-  >
+    >
     <div class="page-customer-order-item__item-thumbnail text-center mr-4 w-[3.125rem] h-[4.9375rem]">
-      <img
-        class="page-customer-order-item__item-image w-[3.125rem] max-h-[4.9375rem]"
-        loading="lazy"
-        *ngIf="item?.product?.ean | productImage; let productImage"
-        [src]="productImage"
-        [alt]="item?.product?.name"
-      />
+      @if (item?.product?.ean | productImage; as productImage) {
+        <img
+          class="page-customer-order-item__item-image w-[3.125rem] max-h-[4.9375rem]"
+          loading="lazy"
+          [src]="productImage"
+          [alt]="item?.product?.name"
+          />
+      }
     </div>
 
     <div
@@ -27,7 +28,7 @@
       [class.text-p2]="item?.product?.name?.length >= 50 && isTablet"
       [class.text-p3]="item?.product?.name?.length >= 60 || !isTablet"
       [class.text-p4]="item?.product?.name?.length >= 100"
-    >
+      >
       {{ item?.product?.name }}
     </div>
 
@@ -35,88 +36,111 @@
       {{ item?.specialComment }}
     </div>
 
-    <div *ngIf="primaryOutletActive" class="page-customer-order-item__item-format desktop-small:text-p2">
-      <div *ngIf="item?.product?.format && item?.product?.formatDetail" class="font-bold flex flex-row">
-        <img
-          class="mr-3"
-          *ngIf="item?.product?.format !== '--'"
-          loading="lazy"
-          src="assets/images/Icon_{{ item?.product?.format }}.svg"
-          [alt]="item?.product?.formatDetail"
-        />
-        {{ item?.product?.formatDetail | substr: 30 }}
+    @if (primaryOutletActive) {
+      <div class="page-customer-order-item__item-format desktop-small:text-p2">
+        @if (item?.product?.format && item?.product?.formatDetail) {
+          <div class="font-bold flex flex-row">
+            @if (item?.product?.format !== '--') {
+              <img
+                class="mr-3"
+                loading="lazy"
+                src="assets/images/Icon_{{ item?.product?.format }}.svg"
+                [alt]="item?.product?.formatDetail"
+                />
+            }
+            {{ item?.product?.formatDetail | substr: 30 }}
+          </div>
+        }
       </div>
-    </div>
+    }
 
-    <div *ngIf="primaryOutletActive" class="page-customer-order-item__item-ean desktop-small:text-p2">
-      {{ item?.product?.ean }}
-    </div>
+    @if (primaryOutletActive) {
+      <div class="page-customer-order-item__item-ean desktop-small:text-p2">
+        {{ item?.product?.ean }}
+      </div>
+    }
 
-    <div *ngIf="primaryOutletActive" class="page-customer-order-item__item-price desktop-small:text-p2 font-bold">
-      {{ item.price | currency: 'EUR' : 'code' }}
-    </div>
+    @if (primaryOutletActive) {
+      <div class="page-customer-order-item__item-price desktop-small:text-p2 font-bold">
+        {{ item.price | currency: 'EUR' : 'code' }}
+      </div>
+    }
 
-    <div *ngIf="primaryOutletActive" class="page-customer-order-item__item-changed desktop-small:text-p2">
-      <ng-container [ngSwitch]="showChangeDate$ | async">
-        <div class="flex flex-row" *ngSwitchCase="true">
-          <div class="min-w-[7.5rem]">Geändert</div>
-          <div class="font-bold">{{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
-        </div>
-        <div class="flex flex-row" *ngSwitchCase="false">
-          <div class="min-w-[7.5rem]">Bestelldatum</div>
-          <div class="font-bold">{{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
-        </div>
-      </ng-container>
-    </div>
+    @if (primaryOutletActive) {
+      <div class="page-customer-order-item__item-changed desktop-small:text-p2">
+        @switch (showChangeDate$ | async) {
+          @case (true) {
+            <div class="flex flex-row">
+              <div class="min-w-[7.5rem]">Geändert</div>
+              <div class="font-bold">{{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+            </div>
+          }
+          @case (false) {
+            <div class="flex flex-row">
+              <div class="min-w-[7.5rem]">Bestelldatum</div>
+              <div class="font-bold">{{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+            </div>
+          }
+        }
+      </div>
+    }
 
-    <div *ngIf="primaryOutletActive" class="page-customer-order-item__item-quantity flex flex-row desktop-small:text-p2">
-      <div class="min-w-[7.5rem]">Menge</div>
-      <div class="font-bold">{{ item.quantity }} x</div>
-    </div>
+    @if (primaryOutletActive) {
+      <div class="page-customer-order-item__item-quantity flex flex-row desktop-small:text-p2">
+        <div class="min-w-[7.5rem]">Menge</div>
+        <div class="font-bold">{{ item.quantity }} x</div>
+      </div>
+    }
 
-    <div *ngIf="primaryOutletActive" class="page-customer-order-item__item-target-branch flex flex-row desktop-small:text-p2">
-      <ng-container *ngIf="item.orderType === 1; else showDelivery">
-        <div class="min-w-[7.5rem]">Zielfiliale</div>
-        <div class="font-bold">{{ item.targetBranch }}</div>
-      </ng-container>
-      <ng-template #showDelivery>
-        <div class="min-w-[7.5rem]">Versanddatum</div>
-        <div class="font-bold">{{ item?.estimatedShippingDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
-      </ng-template>
-    </div>
+    @if (primaryOutletActive) {
+      <div class="page-customer-order-item__item-target-branch flex flex-row desktop-small:text-p2">
+        @if (item.orderType === 1) {
+          <div class="min-w-[7.5rem]">Zielfiliale</div>
+          <div class="font-bold">{{ item.targetBranch }}</div>
+        } @else {
+          <div class="min-w-[7.5rem]">Versanddatum</div>
+          <div class="font-bold">{{ item?.estimatedShippingDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+        }
+      </div>
+    }
 
-    <hr
-      *ngIf="!primaryOutletActive"
-      class="page-customer-order-item__separator border-[#EDEFF0] border-solid border-[1px] -mx-[0.875rem]"
-    />
+    @if (!primaryOutletActive) {
+      <hr
+        class="page-customer-order-item__separator border-[#EDEFF0] border-solid border-[1px] -mx-[0.875rem]"
+        />
+    }
 
     <div
       class="page-customer-order-item__item-order-number desktop-small:text-xl justify-self-end font-bold"
       [class.page-customer-order-item__item-order-number-main]="!primaryOutletActive"
-    >
-      <ng-container *ngIf="item?.compartmentCode; else orderNumber">
+      >
+      @if (item?.compartmentCode) {
         {{ item?.compartmentCode }}{{ item?.compartmentInfo && '_' + item?.compartmentInfo }}
-      </ng-container>
-      <ng-template #orderNumber>{{ item?.orderNumber }}</ng-template>
+      } @else {
+        {{ item?.orderNumber }}
+      }
     </div>
 
     <div
       class="page-customer-order-item__item-processing-paid-status flex flex-col font-bold desktop-small:text-p2 justify-self-end self-center"
-    >
+      >
       <div class="page-customer-order-item__item-processing-status flex flex-row mb-[0.375rem]">
-        <shared-icon
-          class="flex items-center justify-center mr-1"
-          [size]="16"
-          *ngIf="item.processingStatus | processingStatus: 'icon'; let icon"
-          [icon]="icon"
-        ></shared-icon>
+        @if (item.processingStatus | processingStatus: 'icon'; as icon) {
+          <shared-icon
+            class="flex items-center justify-center mr-1"
+            [size]="16"
+            [icon]="icon"
+          ></shared-icon>
+        }
         {{ item.processingStatus | processingStatus }}
       </div>
 
       <div class="page-customer-order-item__item-paid flex flex-row self-end">
-        <div class="font-bold w-fit desktop-small:text-p2 px-3 py-[0.125rem] rounded text-white bg-[#26830C]" *ngIf="item.features?.paid">
-          {{ item.features?.paid }}
-        </div>
+        @if (item.features?.paid) {
+          <div class="font-bold w-fit desktop-small:text-p2 px-3 py-[0.125rem] rounded text-white bg-[#26830C]">
+            {{ item.features?.paid }}
+          </div>
+        }
       </div>
     </div>
   </div>

apps/isa-app/src/page/customer-order/customer-order-search/search-results/customer-order-search-results.component.html

@@ -2,102 +2,111 @@
   class="page-customer-order-search-results__header bg-background-liste flex items-end justify-between"
   [class.pb-4]="!(primaryOutletActive$ | async)"
   [class.flex-col]="!(primaryOutletActive$ | async)"
->
+  >
   <div class="flex flex-row w-full desktop-small:w-min" [class.desktop-large:w-full]="!(primaryOutletActive$ | async)">
-    <shared-filter-input-group-main
-      *ngIf="filter$ | async; let filter"
-      class="block mr-3 w-full desktop-small:w-[23.5rem]"
-      [class.desktop-large:w-full]="!(primaryOutletActive$ | async)"
-      [hint]="message$ | async"
-      [loading]="loading$ | async"
-      [inputGroup]="filter?.input | group: 'main'"
-      (search)="search({ filter, clear: true })"
-      [showDescription]="false"
-      [scanner]="true"
-    ></shared-filter-input-group-main>
+    @if (filter$ | async; as filter) {
+      <shared-filter-input-group-main
+        class="block mr-3 w-full desktop-small:w-[23.5rem]"
+        [class.desktop-large:w-full]="!(primaryOutletActive$ | async)"
+        [hint]="message$ | async"
+        [loading]="loading$ | async"
+        [inputGroup]="filter?.input | group: 'main'"
+        (search)="search({ filter, clear: true })"
+        [showDescription]="false"
+        [scanner]="true"
+      ></shared-filter-input-group-main>
+    }
 
     <a
       class="page-customer-orders-results__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
       [class.active]="hasFilter$ | async"
       [routerLink]="filterRoute"
       queryParamsHandling="preserve"
-    >
+      >
       <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
       Filter
     </a>
   </div>
 
-  <div
-    *ngIf="hits$ | async; let hits"
-    class="page-customer-order-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
-    [class.mb-4]="primaryOutletActive$ | async"
-  >
-    {{ hits ?? 0 }}
-    Titel
-  </div>
+  @if (hits$ | async; as hits) {
+    <div
+      class="page-customer-order-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
+      [class.mb-4]="primaryOutletActive$ | async"
+      >
+      {{ hits ?? 0 }}
+      Titel
+    </div>
+  }
 </div>
 
-<ui-scroll-container
-  *ngIf="!(listEmpty$ | async); else emptyMessage"
-  class="page-customer-order-results__scroll-container m-0 p-0"
-  [showScrollbar]="false"
-  [showScrollArrow]="false"
-  (reachEnd)="loadMore()"
-  [deltaEnd]="150"
-  [itemLength]="itemLength$ | async"
-  [containerHeight]="25"
-  [showSpacer]="(primaryOutletActive$ | async) || (isTablet$ | async)"
->
-  <ng-container *ngIf="processId$ | async; let processId">
-    <div class="page-customer-order-results__items-list w-full" *ngFor="let bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn">
-      <ng-container *ngIf="bueryNumberGroup.items[0]; let firstItem">
-        <div
-          class="page-customer-order-search__item-header-group w-full grid grid-flow-col gap-x-4 items-center justify-between bg-white text-xl rounded-t px-4 py-[0.875rem] font-bold mb-px-2"
-        >
-          <h3 class="m-0 break-words" [class.w-72]="!(primaryOutletActive$ | async)">
-            {{ firstItem?.organisation }}
-            <ng-container *ngIf="!!firstItem?.organisation && (!!firstItem?.firstName || !!firstItem?.lastName)">-</ng-container>
-            {{ firstItem?.lastName }}
-            {{ firstItem?.firstName }}
-          </h3>
-          <h3 class="m-0 break-words text-right" [class.w-40]="!(primaryOutletActive$ | async)">{{ firstItem?.buyerNumber }}</h3>
+@if (!(listEmpty$ | async)) {
+  <ui-scroll-container
+    class="page-customer-order-results__scroll-container m-0 p-0"
+    [showScrollbar]="false"
+    [showScrollArrow]="false"
+    (reachEnd)="loadMore()"
+    [deltaEnd]="150"
+    [itemLength]="itemLength$ | async"
+    [containerHeight]="25"
+    [showSpacer]="(primaryOutletActive$ | async) || (isTablet$ | async)"
+    >
+    @if (processId$ | async; as processId) {
+      @for (bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn; track bueryNumberGroup) {
+        <div class="page-customer-order-results__items-list w-full">
+          @if (bueryNumberGroup.items[0]; as firstItem) {
+            <div
+              class="page-customer-order-search__item-header-group w-full grid grid-flow-col gap-x-4 items-center justify-between bg-white text-xl rounded-t px-4 py-[0.875rem] font-bold mb-px-2"
+              >
+              <h3 class="m-0 break-words" [class.w-72]="!(primaryOutletActive$ | async)">
+                {{ firstItem?.organisation }}
+                @if (!!firstItem?.organisation && (!!firstItem?.firstName || !!firstItem?.lastName)) {
+                  -
+                }
+                {{ firstItem?.lastName }}
+                {{ firstItem?.firstName }}
+              </h3>
+              <h3 class="m-0 break-words text-right" [class.w-40]="!(primaryOutletActive$ | async)">{{ firstItem?.buyerNumber }}</h3>
+            </div>
+          }
+          @for (orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn; track orderNumberGroup) {
+            @for (processingStatusGroup of orderNumberGroup.items | groupBy: byProcessingStatusFn; track processingStatusGroup) {
+              @for (compartmentCodeGroup of processingStatusGroup.items | groupBy: byCompartmentCodeFn; track compartmentCodeGroup) {
+                @for (item of compartmentCodeGroup.items; track trackByFn($index, item); let firstItem = $first) {
+                  <page-customer-order-item
+                    class="page-customer-orders-results__result-item mb-[0.625rem]"
+                    [class.page-customer-orders-results__result-item-main]="primaryOutletActive$ | async"
+                    [item]="item"
+                    [primaryOutletActive]="primaryOutletActive$ | async"
+                  ></page-customer-order-item>
+                }
+              }
+            }
+          }
         </div>
-      </ng-container>
-
-      <ng-container *ngFor="let orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn">
-        <ng-container *ngFor="let processingStatusGroup of orderNumberGroup.items | groupBy: byProcessingStatusFn">
-          <ng-container *ngFor="let compartmentCodeGroup of processingStatusGroup.items | groupBy: byCompartmentCodeFn">
-            <page-customer-order-item
-              *ngFor="let item of compartmentCodeGroup.items; let firstItem = first; trackBy: trackByFn"
-              class="page-customer-orders-results__result-item mb-[0.625rem]"
-              [class.page-customer-orders-results__result-item-main]="primaryOutletActive$ | async"
-              [item]="item"
-              [primaryOutletActive]="primaryOutletActive$ | async"
-            ></page-customer-order-item>
-          </ng-container>
-        </ng-container>
-      </ng-container>
-    </div>
-  </ng-container>
-</ui-scroll-container>
-
-<ng-template #emptyMessage>
+      }
+    }
+  </ui-scroll-container>
+} @else {
   <div class="empty-message">
     Es sind im Moment keine Bestellposten vorhanden,
     <br />
     die bearbeitet werden können.
   </div>
-</ng-template>
+}
 
-<div class="actions z-fixed" *ngIf="actions$ | async; let actions">
-  <button
-    [disabled]="(loadingFetchedActionButton$ | async) || (loading$ | async)"
-    class="cta-action"
-    *ngFor="let action of actions"
-    [class.cta-action-primary]="action.selected"
-    [class.cta-action-secondary]="!action.selected"
-    (click)="handleAction(action)"
-  >
-    <ui-spinner [show]="(loadingFetchedActionButton$ | async) || (loading$ | async)">{{ action.label }}</ui-spinner>
-  </button>
-</div>
+
+@if (actions$ | async; as actions) {
+  <div class="actions z-fixed">
+    @for (action of actions; track action) {
+      <button
+        [disabled]="(loadingFetchedActionButton$ | async) || (loading$ | async)"
+        class="cta-action"
+        [class.cta-action-primary]="action.selected"
+        [class.cta-action-secondary]="!action.selected"
+        (click)="handleAction(action)"
+        >
+        <ui-spinner [show]="(loadingFetchedActionButton$ | async) || (loading$ | async)">{{ action.label }}</ui-spinner>
+      </button>
+    }
+  </div>
+}

apps/isa-app/src/page/customer/components/customer-menu/customer-menu.component.html

@@ -4,7 +4,7 @@
   [cdkMenuTriggerFor]="navMenu"
   #menuTrigger="cdkMenuTriggerFor"
   [class.open]="menuTrigger.isOpen()"
->
+  >
   <shared-icon icon="apps" [size]="24"></shared-icon>
   <shared-icon [icon]="menuTrigger.isOpen() ? 'arrow-drop-up' : 'arrow-drop-down'" [size]="24"></shared-icon>
 </button>
@@ -12,42 +12,46 @@
 <ng-template #navMenu>
   <div class="pt-1">
     <shared-menu>
-      <a
-        sharedMenuItem
-        *ngIf="customerDetailsRoute$ | async; let customerDetailsRoute"
-        [routerLink]="customerDetailsRoute.path"
-        [queryParams]="customerDetailsRoute.queryParams"
-        [queryParamsHandling]="'merge'"
-      >
-        Kundendetails
-      </a>
-      <a
-        sharedMenuItem
-        *ngIf="ordersRoute$ | async; let ordersRoute"
-        [routerLink]="ordersRoute.path"
-        [queryParams]="ordersRoute.queryParams"
-        [queryParamsHandling]="'merge'"
-      >
-        Bestellungen
-      </a>
-      <a
-        sharedMenuItem
-        *ngIf="kundenkarteRoute$ | async; let kundenkarteRoute"
-        [routerLink]="kundenkarteRoute.path"
-        [queryParams]="kundenkarteRoute.queryParams"
-        [queryParamsHandling]="'merge'"
-      >
-        Kundenkarte
-      </a>
-      <a
-        sharedMenuItem
-        *ngIf="historyRoute$ | async; let historyRoute"
-        [routerLink]="historyRoute.path"
-        [queryParams]="historyRoute.queryParams"
-        [queryParamsHandling]="'merge'"
-      >
-        Historie
-      </a>
+      @if (customerDetailsRoute$ | async; as customerDetailsRoute) {
+        <a
+          sharedMenuItem
+          [routerLink]="customerDetailsRoute.path"
+          [queryParams]="customerDetailsRoute.queryParams"
+          [queryParamsHandling]="'merge'"
+          >
+          Kundendetails
+        </a>
+      }
+      @if (ordersRoute$ | async; as ordersRoute) {
+        <a
+          sharedMenuItem
+          [routerLink]="ordersRoute.path"
+          [queryParams]="ordersRoute.queryParams"
+          [queryParamsHandling]="'merge'"
+          >
+          Bestellungen
+        </a>
+      }
+      @if (kundenkarteRoute$ | async; as kundenkarteRoute) {
+        <a
+          sharedMenuItem
+          [routerLink]="kundenkarteRoute.path"
+          [queryParams]="kundenkarteRoute.queryParams"
+          [queryParamsHandling]="'merge'"
+          >
+          Kundenkarte
+        </a>
+      }
+      @if (historyRoute$ | async; as historyRoute) {
+        <a
+          sharedMenuItem
+          [routerLink]="historyRoute.path"
+          [queryParams]="historyRoute.queryParams"
+          [queryParamsHandling]="'merge'"
+          >
+          Historie
+        </a>
+      }
     </shared-menu>
   </div>
 </ng-template>

apps/isa-app/src/page/customer/components/customer-menu/customer-menu.component.ts

@@ -8,7 +8,7 @@ import { map } from 'rxjs/operators';
 import { CustomerSearchNavigation } from '@shared/services/navigation';
 import { ComponentStore } from '@ngrx/component-store';
 import { RouterLink } from '@angular/router';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 
 export interface CustomerMenuComponentState {
   customerId?: number;
@@ -26,7 +26,7 @@ export interface CustomerMenuComponentState {
   styleUrls: ['customer-menu.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-customer-menu' },
-  imports: [CdkMenuModule, SharedMenuModule, IconComponent, RouterLink, NgIf, AsyncPipe],
+  imports: [CdkMenuModule, SharedMenuModule, IconComponent, RouterLink, AsyncPipe],
 })
 export class CustomerMenuComponent extends ComponentStore<CustomerMenuComponentState> {
   private _navigation = inject(CustomerSearchNavigation);

apps/isa-app/src/page/customer/components/customer-result-list/customer-result-list.component.html

@@ -1,59 +1,66 @@
-<cdk-virtual-scroll-viewport
-  itemSize="100"
-  class="h-[calc(100vh-20.125rem)] desktop-small:h-[calc(100vh-18.625rem)]"
-  *ngIf="!compact"
-  (scrolledIndexChange)="scrolledIndexChange($event)"
->
-  <a
-    *cdkVirtualFor="let customer of customers; trackBy: trackByFn; let index = index"
-    [routerLink]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.path"
-    [queryParams]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.queryParams"
-    [queryParamsHandling]="'merge'"
-    (click)="scrolledIndexChange(index)"
-    routerLinkActive
-    #rla="routerLinkActive"
-  >
-    <page-customer-result-list-item-full [class.active]="rla.isActive" [customer]="customer"></page-customer-result-list-item-full>
-  </a>
-  <div class="h-[6.125rem] bg-white rounded px-4 py-3" *ngIf="hits === customers?.length && !fetching">
-    <ng-container *ngTemplateOutlet="customerNotFound"></ng-container>
-  </div>
-</cdk-virtual-scroll-viewport>
+@if (!compact) {
+  <cdk-virtual-scroll-viewport
+    itemSize="100"
+    class="h-[calc(100vh-20.125rem)] desktop-small:h-[calc(100vh-18.625rem)]"
+    (scrolledIndexChange)="scrolledIndexChange($event)"
+    >
+    <a
+      *cdkVirtualFor="let customer of customers; trackBy: trackByFn; let index = index"
+      [routerLink]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.path"
+      [queryParams]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.queryParams"
+      [queryParamsHandling]="'merge'"
+      (click)="scrolledIndexChange(index)"
+      routerLinkActive
+      #rla="routerLinkActive"
+      >
+      <page-customer-result-list-item-full [class.active]="rla.isActive" [customer]="customer"></page-customer-result-list-item-full>
+    </a>
+    @if (hits === customers?.length && !fetching) {
+      <div class="h-[6.125rem] bg-white rounded px-4 py-3">
+        <ng-container *ngTemplateOutlet="customerNotFound"></ng-container>
+      </div>
+    }
+  </cdk-virtual-scroll-viewport>
+}
 
-<cdk-virtual-scroll-viewport
-  itemSize="191"
-  class="h-[calc(100vh-20.75rem)]"
-  *ngIf="compact"
-  (scrolledIndexChange)="scrolledIndexChange($event)"
->
-  <a
-    *cdkVirtualFor="let customer of customers; trackBy: trackByFn; let index = index"
-    [routerLink]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.path"
-    [queryParams]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.queryParams"
-    [queryParamsHandling]="'merge'"
-    (click)="scrolledIndexChange(index)"
-    routerLinkActive
-    #rla="routerLinkActive"
-  >
-    <page-customer-result-list-item [class.active]="rla.isActive" [customer]="customer"></page-customer-result-list-item>
-  </a>
-  <div class="h-[11.3125rem] bg-white rounded px-4 py-3" *ngIf="hits === customers?.length && !fetching">
-    <ng-container *ngTemplateOutlet="customerNotFound"></ng-container>
-  </div>
-</cdk-virtual-scroll-viewport>
+@if (compact) {
+  <cdk-virtual-scroll-viewport
+    itemSize="191"
+    class="h-[calc(100vh-20.75rem)]"
+    (scrolledIndexChange)="scrolledIndexChange($event)"
+    >
+    <a
+      *cdkVirtualFor="let customer of customers; trackBy: trackByFn; let index = index"
+      [routerLink]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.path"
+      [queryParams]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.queryParams"
+      [queryParamsHandling]="'merge'"
+      (click)="scrolledIndexChange(index)"
+      routerLinkActive
+      #rla="routerLinkActive"
+      >
+      <page-customer-result-list-item [class.active]="rla.isActive" [customer]="customer"></page-customer-result-list-item>
+    </a>
+    @if (hits === customers?.length && !fetching) {
+      <div class="h-[11.3125rem] bg-white rounded px-4 py-3">
+        <ng-container *ngTemplateOutlet="customerNotFound"></ng-container>
+      </div>
+    }
+  </cdk-virtual-scroll-viewport>
+}
 <ng-template #customerNotFound>
   <div class="text-sm">
     Hinweis: Aus Datenschutzgründen werden nur Teilinformationen dargestellt. Tab auf einen Kunden um mehr zu erfahren.
   </div>
   <div class="font-bold text-lg mt-3">
     <span>Kunden nicht gefunden?</span>
-    <a
-      *ngIf="customerCreateNavigation.defaultRoute({ processId: processId }); let route"
-      [routerLink]="route.path"
-      [queryParams]="route.queryParams"
-      class="text-brand"
-    >
-      Neue Kundendaten erfassen
-    </a>
+    @if (customerCreateNavigation.defaultRoute({ processId: processId }); as route) {
+      <a
+        [routerLink]="route.path"
+        [queryParams]="route.queryParams"
+        class="text-brand"
+        >
+        Neue Kundendaten erfassen
+      </a>
+    }
   </div>
 </ng-template>

apps/isa-app/src/page/customer/components/customer-type-selector/customer-type-selector.component.html

@@ -1,21 +1,23 @@
 <ng-container *ifRole="'Store'">
-  <shared-checkbox
-    *ngIf="customerType !== 'b2b'"
-    [ngModel]="p4mUser"
-    (ngModelChange)="setValue({ p4mUser: !p4mUser })"
-    [disabled]="p4mReadonly || readonly"
-  >
-    Kundenkarte
-  </shared-checkbox>
-</ng-container>
-<ng-container *ngFor="let option of filteredOptions$ | async">
-  <shared-checkbox
-    *ngIf="option?.enabled !== false"
-    [ngModel]="option.value === customerType"
-    (ngModelChange)="setValue({ customerType: $event ? option.value : undefined })"
-    [disabled]="isOptionDisabled(option)"
-    [name]="option.value"
-  >
-    {{ option.label }}
-  </shared-checkbox>
+  @if (customerType !== 'b2b') {
+    <shared-checkbox
+      [ngModel]="p4mUser"
+      (ngModelChange)="setValue({ p4mUser: !p4mUser })"
+      [disabled]="p4mReadonly || readonly"
+      >
+      Kundenkarte
+    </shared-checkbox>
+  }
 </ng-container>
+@for (option of filteredOptions$ | async; track option) {
+  @if (option?.enabled !== false) {
+    <shared-checkbox
+      [ngModel]="option.value === customerType"
+      (ngModelChange)="setValue({ customerType: $event ? option.value : undefined })"
+      [disabled]="isOptionDisabled(option)"
+      [name]="option.value"
+      >
+      {{ option.label }}
+    </shared-checkbox>
+  }
+}

apps/isa-app/src/page/customer/components/form-blocks/address/address-form-block.component.html

@@ -6,57 +6,59 @@
       type="text"
       formControlName="street"
       [tabindex]="tabIndexStart"
-     
-      [readonly]="readonly"
-    />
-  </shared-form-control>
-  <shared-form-control label="Hausnummer">
-    <input
-      placeholder="Hausnummer"
-      class="input-control"
-      type="text"
-      formControlName="streetNumber"
-      [tabindex]="tabIndexStart + 1"
-      [readonly]="readonly"
-    />
-  </shared-form-control>
-  <shared-form-control label="PLZ">
-    <input
-      placeholder="PLZ"
-      class="input-control"
-      type="text"
-      formControlName="zipCode"
-      [tabindex]="tabIndexStart + 2"
-      [readonly]="readonly"
-    />
-  </shared-form-control>
-  <shared-form-control label="Ort">
-    <input
-      placeholder="Ort"
-      class="input-control"
-      type="text"
-      formControlName="city"
-      [tabindex]="tabIndexStart + 3"
-      [readonly]="readonly"
-    />
-  </shared-form-control>
 
-  <shared-form-control class="col-span-2" label="Adresszusatz">
-    <input
-      placeholder="Adresszusatz"
-      class="input-control"
-      type="text"
-      formControlName="info"
-      [tabindex]="tabIndexStart + 4"
       [readonly]="readonly"
-    />
-  </shared-form-control>
+      />
+    </shared-form-control>
+    <shared-form-control label="Hausnummer">
+      <input
+        placeholder="Hausnummer"
+        class="input-control"
+        type="text"
+        formControlName="streetNumber"
+        [tabindex]="tabIndexStart + 1"
+        [readonly]="readonly"
+        />
+      </shared-form-control>
+      <shared-form-control label="PLZ">
+        <input
+          placeholder="PLZ"
+          class="input-control"
+          type="text"
+          formControlName="zipCode"
+          [tabindex]="tabIndexStart + 2"
+          [readonly]="readonly"
+          />
+        </shared-form-control>
+        <shared-form-control label="Ort">
+          <input
+            placeholder="Ort"
+            class="input-control"
+            type="text"
+            formControlName="city"
+            [tabindex]="tabIndexStart + 3"
+            [readonly]="readonly"
+            />
+          </shared-form-control>
 
-  <shared-form-control class="col-span-2" label="Land">
-    <shared-select placeholder="Land" formControlName="country" [tabindex]="tabIndexStart + 5" [readonly]="readonly">
-      <shared-select-option *ngFor="let country of countries || (countries$ | async)" [value]="country.isO3166_A_3">
-        {{ country.name }}
-      </shared-select-option>
-    </shared-select>
-  </shared-form-control>
-</ng-container>
+          <shared-form-control class="col-span-2" label="Adresszusatz">
+            <input
+              placeholder="Adresszusatz"
+              class="input-control"
+              type="text"
+              formControlName="info"
+              [tabindex]="tabIndexStart + 4"
+              [readonly]="readonly"
+              />
+            </shared-form-control>
+
+            <shared-form-control class="col-span-2" label="Land">
+              <shared-select placeholder="Land" formControlName="country" [tabindex]="tabIndexStart + 5" [readonly]="readonly">
+                @for (country of countries || (countries$ | async); track country) {
+                  <shared-select-option [value]="country.isO3166_A_3">
+                    {{ country.name }}
+                  </shared-select-option>
+                }
+              </shared-select>
+            </shared-form-control>
+          </ng-container>

apps/isa-app/src/page/customer/components/form-blocks/deviating-address/deviating-address-form-block.component.html

@@ -4,59 +4,64 @@
   [tabindex]="tabIndexStart"
   [autofocus]="focusAfterInit"
   [readonly]="readonly"
->
+  >
   <ng-content></ng-content>
 </shared-checkbox>
-<div class="address-block" *ngIf="control.value.deviatingAddress">
-  <div class="wrapper">
-    <app-organisation-form-block
-      *ngIf="organisation"
-      [tabIndexStart]="tabIndexStart + 1"
-      #orgaBlock
-      (onInit)="addOrganisationGroup($event)"
-      (onDestroy)="removeOrganisationGroup()"
-      [data]="data?.organisation"
-      #nameFormBlock
-      [tabIndexStart]="tabIndexStart + 1"
-      [requiredMarks]="organisationRequiredMarks"
-      [validatorFns]="organisationValidatorFns"
-      [readonly]="readonly"
-    ></app-organisation-form-block>
-    <app-name-form-block
-      (onInit)="addNameGroup($event)"
-      (onDestroy)="removeNameGroup()"
-      [data]="data?.name"
-      #nameFormBlock
-      [requiredMarks]="nameRequiredMarks"
-      [validatorFns]="nameValidatorFns"
-      [readonly]="readonly"
-    ></app-name-form-block>
-    <app-address-form-block
-      #addressFormBlock
-      (onInit)="addAddressGroup($event)"
-      (onDestroy)="removeAddressGroup()"
-      [data]="data?.address"
-      [requiredMarks]="addressRequiredMarks"
-      [validatorFns]="addressValidatorFns"
-      [readonly]="readonly"
-    ></app-address-form-block>
-    <app-email-form-block
-      *ngIf="email"
-      #emailFormBlock
-      (onInit)="addEmailGroup($event)"
-      (onDestroy)="removeEmailGroup()"
-      [data]="data?.email"
-      [requiredMark]="emailRequiredMark"
-      [validatorFns]="emailValidationFns"
-      [readonly]="readonly"
-    ></app-email-form-block>
-    <app-phone-numbers-form-block
-      *ngIf="phoneNumbers"
-      (onInit)="addPhoneNumbersGroup($event)"
-      (onDestroy)="removePhoneNumbersGroup()"
-      [readonly]="readonly"
-    >
-      [tabIndexStart]="emailFormBlock?.tabIndexEnd+1" [requiredMarks]="phoneNumbersRequiredMarks" [validatorFns]="phoneNumbersValidatorFns">
-    </app-phone-numbers-form-block>
+@if (control.value.deviatingAddress) {
+  <div class="address-block">
+    <div class="wrapper">
+      @if (organisation) {
+        <app-organisation-form-block
+          [tabIndexStart]="tabIndexStart + 1"
+          #orgaBlock
+          (onInit)="addOrganisationGroup($event)"
+          (onDestroy)="removeOrganisationGroup()"
+          [data]="data?.organisation"
+          #nameFormBlock
+          [tabIndexStart]="tabIndexStart + 1"
+          [requiredMarks]="organisationRequiredMarks"
+          [validatorFns]="organisationValidatorFns"
+          [readonly]="readonly"
+        ></app-organisation-form-block>
+      }
+      <app-name-form-block
+        (onInit)="addNameGroup($event)"
+        (onDestroy)="removeNameGroup()"
+        [data]="data?.name"
+        #nameFormBlock
+        [requiredMarks]="nameRequiredMarks"
+        [validatorFns]="nameValidatorFns"
+        [readonly]="readonly"
+      ></app-name-form-block>
+      <app-address-form-block
+        #addressFormBlock
+        (onInit)="addAddressGroup($event)"
+        (onDestroy)="removeAddressGroup()"
+        [data]="data?.address"
+        [requiredMarks]="addressRequiredMarks"
+        [validatorFns]="addressValidatorFns"
+        [readonly]="readonly"
+      ></app-address-form-block>
+      @if (email) {
+        <app-email-form-block
+          #emailFormBlock
+          (onInit)="addEmailGroup($event)"
+          (onDestroy)="removeEmailGroup()"
+          [data]="data?.email"
+          [requiredMark]="emailRequiredMark"
+          [validatorFns]="emailValidationFns"
+          [readonly]="readonly"
+        ></app-email-form-block>
+      }
+      @if (phoneNumbers) {
+        <app-phone-numbers-form-block
+          (onInit)="addPhoneNumbersGroup($event)"
+          (onDestroy)="removePhoneNumbersGroup()"
+          [readonly]="readonly"
+          >
+          [tabIndexStart]="emailFormBlock?.tabIndexEnd+1" [requiredMarks]="phoneNumbersRequiredMarks" [validatorFns]="phoneNumbersValidatorFns">
+        </app-phone-numbers-form-block>
+      }
+    </div>
   </div>
-</div>
+}

apps/isa-app/src/page/customer/components/form-blocks/interests/interests-form-block.component.html

@@ -1,12 +1,13 @@
 <div class="interests-description">Geben Sie Interessen an, um Ihre persönlichen Kontoangaben zu verfeinern.</div>
 <div class="interests-wrapper" [formGroup]="control">
-  <shared-checkbox
-    *ngFor="let pair of interests | keyvalue; let idx = index"
-    [formControlName]="pair.key"
-    [tabindex]="tabIndexStart + idx"
-    [autofocus]="focusAfterInit"
-    [readonly]="readonly"
-  >
-    {{ pair.value }}
-  </shared-checkbox>
+  @for (pair of interests | keyvalue; track pair; let idx = $index) {
+    <shared-checkbox
+      [formControlName]="pair.key"
+      [tabindex]="tabIndexStart + idx"
+      [autofocus]="focusAfterInit"
+      [readonly]="readonly"
+      >
+      {{ pair.value }}
+    </shared-checkbox>
+  }
 </div>

apps/isa-app/src/page/customer/components/form-blocks/name/name-form-block.component.html

@@ -6,8 +6,10 @@
       [readonly]="readonly"
       [tabindex]="tabIndexStart"
       [autofocus]="focusAfterInit"
-    >
-      <shared-select-option *ngFor="let gender of genderSettings.genders" [value]="gender.value">{{ gender.label }}</shared-select-option>
+      >
+      @for (gender of genderSettings.genders; track gender) {
+        <shared-select-option [value]="gender.value">{{ gender.label }}</shared-select-option>
+      }
     </shared-select>
   </shared-form-control>
 
@@ -30,7 +32,7 @@
       formControlName="lastName"
       [tabindex]="tabIndexStart + 2"
       [readonly]="readonly"
-    />
+      />
   </shared-form-control>
 
   <shared-form-control label="Vorname">
@@ -41,6 +43,6 @@
       formControlName="firstName"
       [tabindex]="tabIndexStart + 3"
       [readonly]="readonly"
-    />
+      />
   </shared-form-control>
 </ng-container>

apps/isa-app/src/page/customer/components/form-blocks/organisation/organisation-form-block.component.html

@@ -6,30 +6,30 @@
       type="text"
       formControlName="name"
       [tabindex]="tabIndexStart"
-     
+
       [readonly]="readonly"
-    />
-  </shared-form-control>
-  <ng-container *ngIf="appearence === 'default'">
-    <shared-form-control label="Abteilung">
-      <input
-        placeholder="Abteilung"
-        class="input-control"
-        type="text"
-        formControlName="department"
-        [tabindex]="tabIndexStart + 1"
-        [readonly]="readonly"
       />
     </shared-form-control>
-    <shared-form-control label="USt-ID">
-      <input
-        placeholder="USt-ID"
-        class="input-control"
-        type="text"
-        formControlName="vatId"
-        [tabindex]="tabIndexStart + 2"
-        [readonly]="readonly"
-      />
-    </shared-form-control>
-  </ng-container>
-</ng-container>
+    @if (appearence === 'default') {
+      <shared-form-control label="Abteilung">
+        <input
+          placeholder="Abteilung"
+          class="input-control"
+          type="text"
+          formControlName="department"
+          [tabindex]="tabIndexStart + 1"
+          [readonly]="readonly"
+          />
+        </shared-form-control>
+        <shared-form-control label="USt-ID">
+          <input
+            placeholder="USt-ID"
+            class="input-control"
+            type="text"
+            formControlName="vatId"
+            [tabindex]="tabIndexStart + 2"
+            [readonly]="readonly"
+            />
+          </shared-form-control>
+        }
+      </ng-container>

apps/isa-app/src/page/customer/components/form-blocks/p4m-number/p4m-number-form-block.component.html

@@ -6,9 +6,11 @@
     [formControl]="control"
     [tabindex]="tabIndexStart"
     [readonly]="readonly"
-   
-  />
-</shared-form-control>
-<button type="button" *ngIf="!readonly && canScan()" (click)="scan()">
-  <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
-</button>
+
+    />
+  </shared-form-control>
+  @if (!readonly && canScan()) {
+    <button type="button" (click)="scan()">
+      <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
+    </button>
+  }

apps/isa-app/src/page/customer/components/kundenkarte/kundenkarte.component.html

@@ -1,38 +1,62 @@
 <div class="wrapper text-center" [@cardFlip]="state" (@cardFlip.done)="flipAnimationDone($event)">
-  <div *ngIf="cardDetails" class="card-main">
-    <div class="icons text-brand">
-      <button *ngIf="isCustomerCard && frontside" class="icon-barcode" (click)="flipCard()">
-        <shared-icon [size]="35" icon="barcode-scanner"></shared-icon>
-      </button>
-      <button *ngIf="isCustomerCard && !frontside" class="icon-back" (click)="flipCard()">
-        <shared-icon [size]="35" icon="refresh"></shared-icon>
-      </button>
-      <!-- <div *ngIf="!isCustomerCard" class="icon-delete"><ui-icon (click)="onDeletePartnerCard()" size="25px" icon="trash"></ui-icon></div> -->
-    </div>
-    <div class="headline">
-      <p *ngIf="isCustomerCard && frontside">Ihre Lesepunkte</p>
-      <p *ngIf="isCustomerCard && !frontside">Kartennummer</p>
-      <p *ngIf="!isCustomerCard">Partnerkartennummer</p>
-    </div>
-    <div class="mt-2">
-      <div *ngIf="!isCustomerCard || (isCustomerCard && !frontside)" class="card-number">{{ cardDetails.code }}</div>
-      <div *ngIf="isCustomerCard && frontside" class="points">{{ cardDetails.totalPoints | number }}</div>
-    </div>
-    <div class="barcode-button">
-      <div *ngIf="!isCustomerCard || (isCustomerCard && !frontside)" class="barcode-field">
-        <img class="barcode" src="/assets/images/barcode.png" alt="Barcode" />
+  @if (cardDetails) {
+    <div class="card-main">
+      <div class="icons text-brand">
+        @if (isCustomerCard && frontside) {
+          <button class="icon-barcode" (click)="flipCard()">
+            <shared-icon [size]="35" icon="barcode-scanner"></shared-icon>
+          </button>
+        }
+        @if (isCustomerCard && !frontside) {
+          <button class="icon-back" (click)="flipCard()">
+            <shared-icon [size]="35" icon="refresh"></shared-icon>
+          </button>
+        }
+        <!-- <div *ngIf="!isCustomerCard" class="icon-delete"><ui-icon (click)="onDeletePartnerCard()" size="25px" icon="trash"></ui-icon></div> -->
       </div>
-      <div *ngIf="isCustomerCard && frontside">
-        <button class="button" (click)="onRewardShop()">Zum Prämienshop</button>
+      <div class="headline">
+        @if (isCustomerCard && frontside) {
+          <p>Ihre Lesepunkte</p>
+        }
+        @if (isCustomerCard && !frontside) {
+          <p>Kartennummer</p>
+        }
+        @if (!isCustomerCard) {
+          <p>Partnerkartennummer</p>
+        }
+      </div>
+      <div class="mt-2">
+        @if (!isCustomerCard || (isCustomerCard && !frontside)) {
+          <div class="card-number">{{ cardDetails.code }}</div>
+        }
+        @if (isCustomerCard && frontside) {
+          <div class="points">{{ cardDetails.totalPoints | number }}</div>
+        }
+      </div>
+      <div class="barcode-button">
+        @if (!isCustomerCard || (isCustomerCard && !frontside)) {
+          <div class="barcode-field">
+            <img class="barcode" src="/assets/images/barcode.png" alt="Barcode" />
+          </div>
+        }
+        @if (isCustomerCard && frontside) {
+          <div>
+            <button class="button" (click)="onRewardShop()">Zum Prämienshop</button>
+          </div>
+        }
       </div>
     </div>
-  </div>
+  }
   <div class="card-bottom">
-    <div *ngIf="!isCustomerCard || (isCustomerCard && !frontside)" class="customer-name">
-      <p>{{ cardDetails.firstName }} {{ cardDetails.lastName }}</p>
-    </div>
-    <div *ngIf="isCustomerCard && frontside" class="logo ml-2">
-      <img class="logo-picture" src="/assets/images/Hugendubel_Logo.png" alt="Hugendubel Logo" />
-    </div>
+    @if (!isCustomerCard || (isCustomerCard && !frontside)) {
+      <div class="customer-name">
+        <p>{{ cardDetails.firstName }} {{ cardDetails.lastName }}</p>
+      </div>
+    }
+    @if (isCustomerCard && frontside) {
+      <div class="logo ml-2">
+        <img class="logo-picture" src="/assets/images/Hugendubel_Logo.png" alt="Hugendubel Logo" />
+      </div>
+    }
   </div>
 </div>

apps/isa-app/src/page/customer/components/kundenkarte/kundenkarte.component.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { DecimalPipe, NgIf } from '@angular/common';
+import { DecimalPipe } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { IconComponent } from '@shared/components/icon';
 import { BonusCardInfoDTO } from '@generated/swagger/crm-api';
@@ -8,7 +8,7 @@ import { BonusCardInfoDTO } from '@generated/swagger/crm-api';
   selector: 'page-customer-kundenkarte',
   templateUrl: 'kundenkarte.component.html',
   styleUrls: ['kundenkarte.component.scss'],
-  imports: [IconComponent, NgIf, DecimalPipe],
+  imports: [IconComponent, DecimalPipe],
   animations: [
     trigger('cardFlip', [
       state(

apps/isa-app/src/page/customer/create-customer/create-b2b-customer/create-b2b-customer.component.html

@@ -1,89 +1,83 @@
-<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
-  <h1 class="title">Kundendaten erfassen</h1>
-  <p class="description">
-    Um Ihnen den ausgewählten Service zu
-    <br />
-    ermöglichen, legen wir Ihnen gerne
-    <br />
-    ein Kundenkonto an.
-  </p>
-
-  <app-customer-type-selector
-    [processId]="processId$ | async"
-    [p4mUser]="false"
-    customerType="b2b"
-    (valueChanges)="customerTypeChanged($event)"
-  ></app-customer-type-selector>
-
-  <app-organisation-form-block
-    #orga
-    [tabIndexStart]="1"
-    [data]="data.organisation"
-    (dataChanges)="patchFormData('organisation', $event)"
-    (onInit)="addFormBlock('organisation', $event)"
-    [requiredMarks]="organisationFormBlockRequiredMarks"
-    [validatorFns]="organisationFormBlockValidators"
-  ></app-organisation-form-block>
-
-  <app-name-form-block
-    #name
-    [tabIndexStart]="orga.tabIndexEnd + 1"
-    [data]="data.name"
-    (dataChanges)="patchFormData('name', $event)"
-    (onInit)="addFormBlock('name', $event)"
-  ></app-name-form-block>
-
-  <app-address-form-block
-    #address
-    [tabIndexStart]="name.tabIndexEnd + 1"
-    [data]="data.address"
-    (dataChanges)="patchFormData('address', $event)"
-    (onInit)="addFormBlock('address', $event)"
-    [requiredMarks]="addressRequiredMarks"
-    [validatorFns]="addressValidators"
-    [defaults]="{ country: 'DEU' }"
-  ></app-address-form-block>
-
-  <app-email-form-block
-    #email
-    [tabIndexStart]="address.tabIndexEnd + 1"
-    [data]="data.email"
-    (dataChanges)="patchFormData('email', $event)"
-    [validatorFns]="emailFormBlockValidators"
-    (onInit)="addFormBlock('email', $event)"
-  ></app-email-form-block>
-
-  <app-phone-numbers-form-block
-    #phoneNumbers
-    [tabIndexStart]="email.tabIndexEnd + 1"
-    [data]="data.phoneNumbers"
-    (dataChanges)="patchFormData('phoneNumbers', $event)"
-    (onInit)="addFormBlock('phoneNumbers', $event)"
-  ></app-phone-numbers-form-block>
-
-  <app-deviating-address-form-block
-    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
-    [data]="data.deviatingDeliveryAddress"
-    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
-    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
-    [nameRequiredMarks]="deviatingNameRequiredMarks"
-    [nameValidatorFns]="deviatingNameValidationFns"
-    [addressRequiredMarks]="addressRequiredMarks"
-    [addressValidatorFns]="addressValidators"
-    [organisationRequiredMarks]="organisationFormBlockRequiredMarks"
-    [organisationValidatorFns]="organisationFormBlockValidators"
-    [defaults]="{ address: { country: 'DEU' } }"
-    [organisation]="true"
-    [email]="true"
-    [phoneNumbers]="true"
-  >
-    Die Lieferadresse weicht von der Rechnungsadresse ab
-  </app-deviating-address-form-block>
-
-  <div class="spacer"></div>
-  <div class="sticky w-full flex items-center justify-center">
-    <button class="cta-submit" type="button" (click)="save()" [disabled]="form.invalid || form.pending">
-      <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
-    </button>
-  </div>
-</form>
+@if (formData$ | async; as data) {
+  <form (keydown.enter)="$event.preventDefault()">
+    <h1 class="title">Kundendaten erfassen</h1>
+    <p class="description">
+      Um Ihnen den ausgewählten Service zu
+      <br />
+      ermöglichen, legen wir Ihnen gerne
+      <br />
+      ein Kundenkonto an.
+    </p>
+    <app-customer-type-selector
+      [processId]="processId$ | async"
+      [p4mUser]="false"
+      customerType="b2b"
+      (valueChanges)="customerTypeChanged($event)"
+    ></app-customer-type-selector>
+    <app-organisation-form-block
+      #orga
+      [tabIndexStart]="1"
+      [data]="data.organisation"
+      (dataChanges)="patchFormData('organisation', $event)"
+      (onInit)="addFormBlock('organisation', $event)"
+      [requiredMarks]="organisationFormBlockRequiredMarks"
+      [validatorFns]="organisationFormBlockValidators"
+    ></app-organisation-form-block>
+    <app-name-form-block
+      #name
+      [tabIndexStart]="orga.tabIndexEnd + 1"
+      [data]="data.name"
+      (dataChanges)="patchFormData('name', $event)"
+      (onInit)="addFormBlock('name', $event)"
+    ></app-name-form-block>
+    <app-address-form-block
+      #address
+      [tabIndexStart]="name.tabIndexEnd + 1"
+      [data]="data.address"
+      (dataChanges)="patchFormData('address', $event)"
+      (onInit)="addFormBlock('address', $event)"
+      [requiredMarks]="addressRequiredMarks"
+      [validatorFns]="addressValidators"
+      [defaults]="{ country: 'DEU' }"
+    ></app-address-form-block>
+    <app-email-form-block
+      #email
+      [tabIndexStart]="address.tabIndexEnd + 1"
+      [data]="data.email"
+      (dataChanges)="patchFormData('email', $event)"
+      [validatorFns]="emailFormBlockValidators"
+      (onInit)="addFormBlock('email', $event)"
+    ></app-email-form-block>
+    <app-phone-numbers-form-block
+      #phoneNumbers
+      [tabIndexStart]="email.tabIndexEnd + 1"
+      [data]="data.phoneNumbers"
+      (dataChanges)="patchFormData('phoneNumbers', $event)"
+      (onInit)="addFormBlock('phoneNumbers', $event)"
+    ></app-phone-numbers-form-block>
+    <app-deviating-address-form-block
+      [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+      [data]="data.deviatingDeliveryAddress"
+      (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+      (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+      [nameRequiredMarks]="deviatingNameRequiredMarks"
+      [nameValidatorFns]="deviatingNameValidationFns"
+      [addressRequiredMarks]="addressRequiredMarks"
+      [addressValidatorFns]="addressValidators"
+      [organisationRequiredMarks]="organisationFormBlockRequiredMarks"
+      [organisationValidatorFns]="organisationFormBlockValidators"
+      [defaults]="{ address: { country: 'DEU' } }"
+      [organisation]="true"
+      [email]="true"
+      [phoneNumbers]="true"
+      >
+      Die Lieferadresse weicht von der Rechnungsadresse ab
+    </app-deviating-address-form-block>
+    <div class="spacer"></div>
+    <div class="sticky w-full flex items-center justify-center">
+      <button class="cta-submit" type="button" (click)="save()" [disabled]="form.invalid || form.pending">
+        <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+      </button>
+    </div>
+  </form>
+}

apps/isa-app/src/page/customer/create-customer/create-customer.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { CustomerCreateSideViewModule } from './customer-create-side-view';
@@ -10,7 +10,7 @@ import { SharedSplitscreenComponent } from '@shared/components/splitscreen';
   templateUrl: 'create-customer.component.html',
   styleUrls: ['create-customer.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, RouterModule, SharedSplitscreenComponent, CustomerCreateSideViewModule],
+  imports: [RouterModule, SharedSplitscreenComponent, CustomerCreateSideViewModule],
 })
 export class CreateCustomerComponent {
   processId$ = this._activatedRoute.parent.data.pipe(map((data) => data.processId));

apps/isa-app/src/page/customer/create-customer/create-guest-customer/create-guest-customer.component.html

@@ -1,102 +1,94 @@
-<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
-  <h1 class="title">Kundendaten erfassen</h1>
-  <p class="description">
-    Um Ihnen den ausgewählten Service
-    <br />
-    zu ermöglichen, legen wir Ihnen
-    <br />
-    gerne ein Kundenkonto an.
-    <br />
-  </p>
-
-  <app-customer-type-selector
-    [processId]="processId$ | async"
-    [p4mUser]="false"
-    customerType="guest"
-    (valueChanges)="customerTypeChanged($event)"
-  ></app-customer-type-selector>
-
-  <app-name-form-block
-    #name
-    [tabIndexStart]="1"
-    [data]="data.name"
-    (dataChanges)="patchFormData('name', $event)"
-    (onInit)="addFormBlock('name', $event)"
-    [requiredMarks]="nameRequiredMarks"
-    [validatorFns]="nameValidationFns"
-  ></app-name-form-block>
-
-  <p class="info">
-    Wir werden Ihnen Werbung zu ähnlichen Produkten oder Dienstleistungen aus unserem Sortiment per E-Mail zusenden. Sie können der
-    Verwendung Ihrer Daten jederzeit z.B. mittels der in den E-Mails enthaltenen Abmeldelinks widersprechen, ohne dass hierfür andere als
-    die Übermittlungskosten nach den Basistarifen entstehen.
-  </p>
-
-  <app-email-form-block
-    #email
-    [tabIndexStart]="name.tabIndexEnd + 1"
-    [data]="data.email"
-    [requiredMark]="true"
-    (dataChanges)="patchFormData('email', $event)"
-    [validatorFns]="emailFormBlockValidators"
-    (onInit)="addFormBlock('email', $event)"
-  ></app-email-form-block>
-
-  <app-organisation-form-block
-    #orga
-    [tabIndexStart]="email.tabIndexStart + 1"
-    [data]="data.organisation"
-    (dataChanges)="patchFormData('organisation', $event)"
-    (onInit)="addFormBlock('organisation', $event)"
-    appearence="compact"
-  ></app-organisation-form-block>
-
-  <app-address-form-block
-    #address
-    [tabIndexStart]="orga.tabIndexEnd + 1"
-    [data]="data.address"
-    (dataChanges)="patchFormData('address', $event)"
-    (onInit)="addFormBlock('address', $event)"
-    [requiredMarks]="addressRequiredMarks"
-    [validatorFns]="addressValidators"
-    [defaults]="{ country: 'DEU' }"
-  ></app-address-form-block>
-
-  <app-phone-numbers-form-block
-    #phoneNumbers
-    [tabIndexStart]="address.tabIndexEnd + 1"
-    [data]="data.phoneNumbers"
-    (dataChanges)="patchFormData('phoneNumbers', $event)"
-    (onInit)="addFormBlock('phoneNumbers', $event)"
-  ></app-phone-numbers-form-block>
-
-  <app-birth-date-form-block
-    #birthDate
-    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
-    (onInit)="addFormBlock('birthDate', $event)"
-    [data]="data.birthDate"
-    (dataChanges)="patchFormData('birthDate', $event)"
-  ></app-birth-date-form-block>
-
-  <app-deviating-address-form-block
-    [tabIndexStart]="birthDate.tabIndexEnd + 1"
-    [data]="data.deviatingDeliveryAddress"
-    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
-    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
-    [nameRequiredMarks]="deviatingNameRequiredMarks"
-    [nameValidatorFns]="deviatingNameValidationFns"
-    [addressRequiredMarks]="addressRequiredMarks"
-    [addressValidatorFns]="addressValidators"
-    [defaults]="{ address: { country: 'DEU' } }"
-    [organisation]="true"
-  >
-    Die Lieferadresse weicht von der Rechnungsadresse ab
-  </app-deviating-address-form-block>
-
-  <div class="spacer"></div>
-  <div class="sticky w-full flex items-center justify-center">
-    <button class="cta-submit" type="button" (click)="save()" [disabled]="form.invalid || form.pending">
-      <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
-    </button>
-  </div>
-</form>
+@if (formData$ | async; as data) {
+  <form (keydown.enter)="$event.preventDefault()">
+    <h1 class="title">Kundendaten erfassen</h1>
+    <p class="description">
+      Um Ihnen den ausgewählten Service
+      <br />
+      zu ermöglichen, legen wir Ihnen
+      <br />
+      gerne ein Kundenkonto an.
+      <br />
+    </p>
+    <app-customer-type-selector
+      [processId]="processId$ | async"
+      [p4mUser]="false"
+      customerType="guest"
+      (valueChanges)="customerTypeChanged($event)"
+    ></app-customer-type-selector>
+    <app-name-form-block
+      #name
+      [tabIndexStart]="1"
+      [data]="data.name"
+      (dataChanges)="patchFormData('name', $event)"
+      (onInit)="addFormBlock('name', $event)"
+      [requiredMarks]="nameRequiredMarks"
+      [validatorFns]="nameValidationFns"
+    ></app-name-form-block>
+    <p class="info">
+      Wir werden Ihnen Werbung zu ähnlichen Produkten oder Dienstleistungen aus unserem Sortiment per E-Mail zusenden. Sie können der
+      Verwendung Ihrer Daten jederzeit z.B. mittels der in den E-Mails enthaltenen Abmeldelinks widersprechen, ohne dass hierfür andere als
+      die Übermittlungskosten nach den Basistarifen entstehen.
+    </p>
+    <app-email-form-block
+      #email
+      [tabIndexStart]="name.tabIndexEnd + 1"
+      [data]="data.email"
+      [requiredMark]="true"
+      (dataChanges)="patchFormData('email', $event)"
+      [validatorFns]="emailFormBlockValidators"
+      (onInit)="addFormBlock('email', $event)"
+    ></app-email-form-block>
+    <app-organisation-form-block
+      #orga
+      [tabIndexStart]="email.tabIndexStart + 1"
+      [data]="data.organisation"
+      (dataChanges)="patchFormData('organisation', $event)"
+      (onInit)="addFormBlock('organisation', $event)"
+      appearence="compact"
+    ></app-organisation-form-block>
+    <app-address-form-block
+      #address
+      [tabIndexStart]="orga.tabIndexEnd + 1"
+      [data]="data.address"
+      (dataChanges)="patchFormData('address', $event)"
+      (onInit)="addFormBlock('address', $event)"
+      [requiredMarks]="addressRequiredMarks"
+      [validatorFns]="addressValidators"
+      [defaults]="{ country: 'DEU' }"
+    ></app-address-form-block>
+    <app-phone-numbers-form-block
+      #phoneNumbers
+      [tabIndexStart]="address.tabIndexEnd + 1"
+      [data]="data.phoneNumbers"
+      (dataChanges)="patchFormData('phoneNumbers', $event)"
+      (onInit)="addFormBlock('phoneNumbers', $event)"
+    ></app-phone-numbers-form-block>
+    <app-birth-date-form-block
+      #birthDate
+      [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+      (onInit)="addFormBlock('birthDate', $event)"
+      [data]="data.birthDate"
+      (dataChanges)="patchFormData('birthDate', $event)"
+    ></app-birth-date-form-block>
+    <app-deviating-address-form-block
+      [tabIndexStart]="birthDate.tabIndexEnd + 1"
+      [data]="data.deviatingDeliveryAddress"
+      (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+      (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+      [nameRequiredMarks]="deviatingNameRequiredMarks"
+      [nameValidatorFns]="deviatingNameValidationFns"
+      [addressRequiredMarks]="addressRequiredMarks"
+      [addressValidatorFns]="addressValidators"
+      [defaults]="{ address: { country: 'DEU' } }"
+      [organisation]="true"
+      >
+      Die Lieferadresse weicht von der Rechnungsadresse ab
+    </app-deviating-address-form-block>
+    <div class="spacer"></div>
+    <div class="sticky w-full flex items-center justify-center">
+      <button class="cta-submit" type="button" (click)="save()" [disabled]="form.invalid || form.pending">
+        <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+      </button>
+    </div>
+  </form>
+}

apps/isa-app/src/page/customer/create-customer/create-p4m-customer/create-p4m-customer.component.html

@@ -1,10 +1,10 @@
-<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
-  <h1 class="title flex flex-row items-center justify-center">
-    Kundendaten erfassen
-    <!-- <span
-      class="rounded-full ml-4 h-8 w-8 text-xl text-center border-2 border-solid border-brand text-brand">i</span> -->
+@if (formData$ | async; as data) {
+  <form (keydown.enter)="$event.preventDefault()">
+    <h1 class="title flex flex-row items-center justify-center">
+      Kundendaten erfassen
+      <!-- <span
+    class="rounded-full ml-4 h-8 w-8 text-xl text-center border-2 border-solid border-brand text-brand">i</span> -->
   </h1>
-
   <p class="description">
     Um Sie als Kunde beim nächsten
     <br />
@@ -12,7 +12,6 @@
     <br />
     wir Ihnen gerne eine Kundenkarte an.
   </p>
-
   <app-customer-type-selector
     [processId]="processId$ | async"
     [p4mUser]="true"
@@ -20,7 +19,6 @@
     (valueChanges)="customerTypeChanged($event)"
     [p4mReadonly]="data?._meta?.p4mRequired"
   ></app-customer-type-selector>
-
   <app-p4m-number-form-block
     #p4mBlock
     [tabIndexStart]="1"
@@ -31,7 +29,6 @@
     [focusAfterInit]="!data?._meta?.p4mRequired"
     [asyncValidatorFns]="asyncLoyaltyCardValidatorFn"
   ></app-p4m-number-form-block>
-
   <app-accept-agb-form-block
     [tabIndexStart]="inBlock.tabIndexEnd + 1"
     (onInit)="addFormBlock('agb', $event)"
@@ -40,7 +37,6 @@
     [requiredMark]="true"
     [validatorFns]="agbValidatorFns"
   ></app-accept-agb-form-block>
-
   <app-newsletter-form-block
     class="mb-4"
     #newsletterBlock
@@ -50,7 +46,6 @@
     (dataChanges)="patchFormData('newsletter', $event)"
     [focusAfterInit]="data?._meta?.p4mRequired"
   ></app-newsletter-form-block>
-
   <app-name-form-block
     #nameBlock
     [tabIndexStart]="newsletterBlock.tabIndexEnd + 1"
@@ -60,13 +55,13 @@
     [validatorFns]="nameValidationFns"
     (dataChanges)="patchFormData('name', $event)"
   ></app-name-form-block>
-
-  <p class="info" *ngIf="customerType === 'webshop-p4m'">
-    Wir werden Ihnen Werbung zu ähnlichen Produkten oder Dienstleistungen aus unserem Sortiment per E-Mail zusenden. Sie können der
-    Verwendung Ihrer Daten jederzeit z.B. mittels der in den E-Mails enthaltenen Abmeldelinks widersprechen, ohne dass hierfür andere als
-    die Übermittlungskosten nach den Basistarifen entstehen.
-  </p>
-
+  @if (customerType === 'webshop-p4m') {
+    <p class="info">
+      Wir werden Ihnen Werbung zu ähnlichen Produkten oder Dienstleistungen aus unserem Sortiment per E-Mail zusenden. Sie können der
+      Verwendung Ihrer Daten jederzeit z.B. mittels der in den E-Mails enthaltenen Abmeldelinks widersprechen, ohne dass hierfür andere als
+      die Übermittlungskosten nach den Basistarifen entstehen.
+    </p>
+  }
   <app-email-form-block
     class="flex-grow"
     #email
@@ -78,7 +73,6 @@
     [validatorFns]="emailValidatorFn"
     [asyncValidatorFns]="asyncEmailVlaidtorFn"
   ></app-email-form-block>
-
   <app-organisation-form-block
     #orgBlock
     [tabIndexStart]="email.tabIndexEnd + 1"
@@ -87,7 +81,6 @@
     [data]="data.organisation"
     (dataChanges)="patchFormData('organisation', $event)"
   ></app-organisation-form-block>
-
   <app-address-form-block
     [defaults]="{ country: 'DEU' }"
     #addressBlock
@@ -98,7 +91,6 @@
     [requiredMarks]="addressRequiredMarks"
     [validatorFns]="addressValidatorFns"
   ></app-address-form-block>
-
   <app-deviating-address-form-block
     #ddaBlock
     [defaults]="{ address: { country: 'DEU' } }"
@@ -110,10 +102,9 @@
     [nameValidatorFns]="nameValidationFns"
     [addressRequiredMarks]="shippingAddressRequiredMarks"
     [addressValidatorFns]="shippingAddressValidators"
-  >
+    >
     Die Lieferadresse weicht von der Rechnungsadresse ab
   </app-deviating-address-form-block>
-
   <app-phone-numbers-form-block
     #phoneNumbers
     [tabIndexStart]="ddaBlock.tabIndexEnd + 1"
@@ -121,7 +112,6 @@
     [data]="data.phoneNumbers"
     (dataChanges)="patchFormData('phoneNumbers', $event)"
   ></app-phone-numbers-form-block>
-
   <app-birth-date-form-block
     #bdBlock
     [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
@@ -131,7 +121,6 @@
     [requiredMark]="true"
     [validatorFns]="birthDateValidatorFns"
   ></app-birth-date-form-block>
-
   <app-interests-form-block
     #inBlock
     [tabIndexStart]="bdBlock.tabIndexEnd + 1"
@@ -139,12 +128,11 @@
     [data]="data.interests"
     (dataChanges)="patchFormData('interests', $event)"
   ></app-interests-form-block>
-
   <div class="spacer"></div>
-
   <div class="sticky w-full flex items-center justify-center">
     <button class="cta-submit" type="button" [disabled]="form.invalid || form.pending" (click)="save()">
       <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
     </button>
   </div>
 </form>
+}

apps/isa-app/src/page/customer/create-customer/create-store-customer/create-store-customer.component.html

@@ -1,86 +1,78 @@
-<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
-  <h1 class="title">Kundendaten erfassen</h1>
-  <p class="description">Wir legen Ihnen gerne ein Kundenkonto an</p>
-
-  <app-customer-type-selector
-    [processId]="processId$ | async"
-    [p4mUser]="false"
-    customerType="store"
-    (valueChanges)="customerTypeChanged($event)"
-  ></app-customer-type-selector>
-
-  <app-name-form-block
-    #name
-    [tabIndexStart]="1"
-    (onInit)="addFormBlock('name', $event)"
-    [requiredMarks]="nameRequiredMarks"
-    [validatorFns]="nameValidationFns"
-    [data]="data.name"
-    (dataChanges)="patchFormData('name', $event)"
-  ></app-name-form-block>
-
-  <app-email-form-block
-    #email
-    [tabIndexStart]="name.tabIndexEnd + 1"
-    [validatorFns]="emailFormBlockValidators"
-    (onInit)="addFormBlock('email', $event)"
-    [data]="data.email"
-    (dataChanges)="patchFormData('email', $event)"
-  ></app-email-form-block>
-
-  <app-organisation-form-block
-    #orga
-    [tabIndexStart]="email.tabIndexEnd + 1"
-    appearence="compact"
-    (onInit)="addFormBlock('organisation', $event)"
-    [data]="data.organisation"
-    (dataChanges)="patchFormData('organisation', $event)"
-  ></app-organisation-form-block>
-
-  <app-address-form-block
-    #address
-    [tabIndexStart]="orga.tabIndexEnd + 1"
-    (onInit)="addFormBlock('address', $event)"
-    [data]="data.address"
-    (dataChanges)="patchFormData('address', $event)"
-  ></app-address-form-block>
-
-  <app-phone-numbers-form-block
-    #phoneNumbers
-    [tabIndexStart]="address.tabIndexEnd + 1"
-    (onInit)="addFormBlock('phoneNumbers', $event)"
-    [data]="data.phoneNumbers"
-    (dataChanges)="patchFormData('phoneNumbers', $event)"
-  ></app-phone-numbers-form-block>
-
-  <app-birth-date-form-block
-    #birthDate
-    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
-    (onInit)="addFormBlock('birthDate', $event)"
-    [data]="data.birthDate"
-    (dataChanges)="patchFormData('birthDate', $event)"
-  ></app-birth-date-form-block>
-
-  <app-deviating-address-form-block
-    [tabIndexStart]="birthDate.tabIndexEnd + 1"
-    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
-    [organisation]="true"
-    [nameRequiredMarks]="nameRequiredMarks"
-    [nameValidatorFns]="nameValidationFns"
-    [addressRequiredMarks]="addressRequiredMarks"
-    [addressValidatorFns]="deviatingAddressValidators"
-    [defaults]="{ address: { country: 'DEU' } }"
-    [data]="data.deviatingDeliveryAddress"
-    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
-  >
-    Die Lieferadresse weicht von der Rechnungsadresse ab
-  </app-deviating-address-form-block>
-
-  <div class="spacer"></div>
-
-  <div class="sticky w-full flex items-center justify-center">
-    <button class="cta-submit" type="button" [disabled]="form.invalid || form.pending" (click)="save()">
-      <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
-    </button>
-  </div>
-</form>
+@if (formData$ | async; as data) {
+  <form (keydown.enter)="$event.preventDefault()">
+    <h1 class="title">Kundendaten erfassen</h1>
+    <p class="description">Wir legen Ihnen gerne ein Kundenkonto an</p>
+    <app-customer-type-selector
+      [processId]="processId$ | async"
+      [p4mUser]="false"
+      customerType="store"
+      (valueChanges)="customerTypeChanged($event)"
+    ></app-customer-type-selector>
+    <app-name-form-block
+      #name
+      [tabIndexStart]="1"
+      (onInit)="addFormBlock('name', $event)"
+      [requiredMarks]="nameRequiredMarks"
+      [validatorFns]="nameValidationFns"
+      [data]="data.name"
+      (dataChanges)="patchFormData('name', $event)"
+    ></app-name-form-block>
+    <app-email-form-block
+      #email
+      [tabIndexStart]="name.tabIndexEnd + 1"
+      [validatorFns]="emailFormBlockValidators"
+      (onInit)="addFormBlock('email', $event)"
+      [data]="data.email"
+      (dataChanges)="patchFormData('email', $event)"
+    ></app-email-form-block>
+    <app-organisation-form-block
+      #orga
+      [tabIndexStart]="email.tabIndexEnd + 1"
+      appearence="compact"
+      (onInit)="addFormBlock('organisation', $event)"
+      [data]="data.organisation"
+      (dataChanges)="patchFormData('organisation', $event)"
+    ></app-organisation-form-block>
+    <app-address-form-block
+      #address
+      [tabIndexStart]="orga.tabIndexEnd + 1"
+      (onInit)="addFormBlock('address', $event)"
+      [data]="data.address"
+      (dataChanges)="patchFormData('address', $event)"
+    ></app-address-form-block>
+    <app-phone-numbers-form-block
+      #phoneNumbers
+      [tabIndexStart]="address.tabIndexEnd + 1"
+      (onInit)="addFormBlock('phoneNumbers', $event)"
+      [data]="data.phoneNumbers"
+      (dataChanges)="patchFormData('phoneNumbers', $event)"
+    ></app-phone-numbers-form-block>
+    <app-birth-date-form-block
+      #birthDate
+      [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+      (onInit)="addFormBlock('birthDate', $event)"
+      [data]="data.birthDate"
+      (dataChanges)="patchFormData('birthDate', $event)"
+    ></app-birth-date-form-block>
+    <app-deviating-address-form-block
+      [tabIndexStart]="birthDate.tabIndexEnd + 1"
+      (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+      [organisation]="true"
+      [nameRequiredMarks]="nameRequiredMarks"
+      [nameValidatorFns]="nameValidationFns"
+      [addressRequiredMarks]="addressRequiredMarks"
+      [addressValidatorFns]="deviatingAddressValidators"
+      [defaults]="{ address: { country: 'DEU' } }"
+      [data]="data.deviatingDeliveryAddress"
+      (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+      >
+      Die Lieferadresse weicht von der Rechnungsadresse ab
+    </app-deviating-address-form-block>
+    <div class="spacer"></div>
+    <div class="sticky w-full flex items-center justify-center">
+      <button class="cta-submit" type="button" [disabled]="form.invalid || form.pending" (click)="save()">
+        <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+      </button>
+    </div>
+  </form>
+}