feat(front-end): ssr implementation

2026-03-11 16:37:08 +01:00
parent b7dfc53bc0
commit 2ace632022
23 changed files with 933 additions and 533 deletions
--- a/frontend/src/app/features/admin/pages/admin-cad-invoices.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-cad-invoices.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, OnInit, PLATFORM_ID, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
  AdminCadInvoice,
@@ -16,6 +16,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
  styleUrl: './admin-cad-invoices.component.scss',
 })
 export class AdminCadInvoicesComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private readonly adminOperationsService = inject(AdminOperationsService);
  private readonly adminOrdersService = inject(AdminOrdersService);

@@ -112,11 +113,17 @@ export class AdminCadInvoicesComponent implements OnInit {
  }

  openCheckout(path: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
    const url = this.toCheckoutUrl(path);
    window.open(url, '_blank');
  }

  copyCheckout(path: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
    const url = this.toCheckoutUrl(path);
    navigator.clipboard?.writeText(url);
    this.successMessage = 'Link checkout CAD copiato negli appunti.';
@@ -126,6 +133,9 @@ export class AdminCadInvoicesComponent implements OnInit {
    if (!orderId) return;
    this.adminOrdersService.downloadOrderInvoice(orderId).subscribe({
      next: (blob) => {
+        if (!this.isBrowser) {
+          return;
+        }
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
@@ -142,10 +152,16 @@ export class AdminCadInvoicesComponent implements OnInit {
  private toCheckoutUrl(path: string): string {
    const safePath = path.startsWith('/') ? path : `/${path}`;
    const lang = this.resolveLang();
+    if (!this.isBrowser) {
+      return `/${lang}${safePath}`;
+    }
    return `${window.location.origin}/${lang}${safePath}`;
  }

  private resolveLang(): string {
+    if (!this.isBrowser) {
+      return 'it';
+    }
    const firstSegment = window.location.pathname
      .split('/')
      .filter(Boolean)
--- a/frontend/src/app/features/admin/pages/admin-contact-requests.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-contact-requests.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
  AdminContactRequest,
@@ -17,6 +17,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
  styleUrl: './admin-contact-requests.component.scss',
 })
 export class AdminContactRequestsComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private readonly adminOperationsService = inject(AdminOperationsService);

  readonly statusOptions = ['NEW', 'PENDING', 'IN_PROGRESS', 'DONE', 'CLOSED'];
@@ -171,6 +172,9 @@ export class AdminContactRequestsComponent implements OnInit {
  }

  private downloadBlob(blob: Blob, filename: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
--- a/frontend/src/app/features/admin/pages/admin-dashboard.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-dashboard.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
  AdminOrder,
@@ -16,6 +16,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
  styleUrl: './admin-dashboard.component.scss',
 })
 export class AdminDashboardComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private readonly adminOrdersService = inject(AdminOrdersService);

  orders: AdminOrder[] = [];
@@ -498,6 +499,9 @@ export class AdminDashboardComponent implements OnInit {
  }

  private downloadBlob(blob: Blob, filename: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.ts
@@ -1,5 +1,11 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import {
+  Component,
+  PLATFORM_ID,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { of, switchMap } from 'rxjs';
 import {
@@ -85,6 +91,7 @@ const MEDIA_LANGUAGE_LABELS: Readonly<Record<AdminMediaLanguage, string>> = {
  styleUrl: './admin-home-media.component.scss',
 })
 export class AdminHomeMediaComponent implements OnInit, OnDestroy {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private readonly adminMediaService = inject(AdminMediaService);
  readonly mediaLanguages = SUPPORTED_MEDIA_LANGUAGES;
  readonly mediaLanguageLabels = MEDIA_LANGUAGE_LABELS;
@@ -243,7 +250,8 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {

    this.revokePreviewUrl(formState.previewUrl);
    formState.file = file;
-    formState.previewUrl = file ? URL.createObjectURL(file) : null;
+    formState.previewUrl =
+      file && this.isBrowser ? URL.createObjectURL(file) : null;

    if (file && this.areAllTitlesBlank(formState.translations)) {
      const nextTitle = this.deriveDefaultTitle(file.name);
@@ -583,6 +591,9 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
  }

  private revokePreviewUrl(previewUrl: string | null): void {
+    if (!this.isBrowser) {
+      return;
+    }
    if (!previewUrl?.startsWith('blob:')) {
      return;
    }
--- a/frontend/src/app/features/admin/pages/admin-sessions.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-sessions.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import {
  AdminOperationsService,
  AdminQuoteSession,
@@ -15,6 +15,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
  styleUrl: './admin-sessions.component.scss',
 })
 export class AdminSessionsComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private readonly adminOperationsService = inject(AdminOperationsService);

  sessions: AdminQuoteSession[] = [];
@@ -51,9 +52,11 @@ export class AdminSessionsComponent implements OnInit {
      return;
    }

-    const confirmed = window.confirm(
-      `Vuoi eliminare la sessione ${session.id}? Questa azione non si puo annullare.`,
-    );
+    const confirmed =
+      this.isBrowser &&
+      window.confirm(
+        `Vuoi eliminare la sessione ${session.id}? Questa azione non si puo annullare.`,
+      );
    if (!confirmed) {
      return;
    }
--- a/frontend/src/app/features/admin/pages/admin-shop.component.html
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.html
@@ -878,6 +878,7 @@
                    class="ui-form-control"
                    [(ngModel)]="material.materialCode"
                    [name]="'material-code-' + index"
+                    (ngModelChange)="onMaterialCodeChange(index, $event)"
                  >
                    <option [ngValue]="''" disabled>Seleziona materiale</option>
                    <option
@@ -915,6 +916,28 @@
                  />
                </label>

+                <label class="ui-form-field" *ngIf="material.isDefault">
+                  <span class="ui-form-caption">Colore default</span>
+                  <select
+                    class="ui-form-control"
+                    [(ngModel)]="material.defaultColorKey"
+                    [name]="'material-default-color-' + index"
+                    [disabled]="materialColorCount(material.materialCode) === 0"
+                  >
+                    <option [ngValue]="''" disabled>
+                      Seleziona colore default
+                    </option>
+                    <option
+                      *ngFor="
+                        let option of materialColorOptions(material.materialCode)
+                      "
+                      [ngValue]="option.key"
+                    >
+                      {{ option.label }}
+                    </option>
+                  </select>
+                </label>
+
                <div class="toggle-row toggle-row--compact">
                  <label class="ui-checkbox">
                    <input
--- a/frontend/src/app/features/admin/pages/admin-shop.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.ts
@@ -1,10 +1,11 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
  Component,
  ElementRef,
  HostListener,
  OnDestroy,
  OnInit,
+  PLATFORM_ID,
  ViewChild,
  inject,
 } from '@angular/core';
@@ -53,6 +54,7 @@ interface CategoryFormState {

 interface ProductMaterialFormState {
  materialCode: string;
+  defaultColorKey: string;
  priceChf: string;
  isDefault: boolean;
  isActive: boolean;
@@ -138,6 +140,9 @@ const RICH_TEXT_ALLOWED_TAGS = new Set([
  styleUrl: './admin-shop.component.scss',
 })
 export class AdminShopComponent implements OnInit, OnDestroy {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+  private readonly documentRef = inject(DOCUMENT);
  private readonly adminShopService = inject(AdminShopService);
  private readonly adminOperationsService = inject(AdminOperationsService);
  private descriptionEditorElement: HTMLDivElement | null = null;
@@ -200,12 +205,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {

  ngOnDestroy(): void {
    this.revokeImagePreviewUrl(this.imageUploadState.previewUrl);
-    document.body.style.removeProperty('cursor');
+    if (this.isBrowser) {
+      this.documentRef.body?.style.removeProperty('cursor');
+    }
  }

  @HostListener('window:pointermove', ['$event'])
  onWindowPointerMove(event: PointerEvent): void {
-    if (!this.isResizingPanels) {
+    if (!this.isBrowser || !this.isResizingPanels) {
      return;
    }
    this.updateListPanelWidthFromPointer(event.clientX);
@@ -214,11 +221,13 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  @HostListener('window:pointerup')
  @HostListener('window:pointercancel')
  onWindowPointerUp(): void {
-    if (!this.isResizingPanels) {
+    if (!this.isBrowser || !this.isResizingPanels) {
      return;
    }
    this.isResizingPanels = false;
-    document.body.style.cursor = '';
+    if (this.documentRef.body) {
+      this.documentRef.body.style.cursor = '';
+    }
    this.persistListPanelWidth();
  }

@@ -368,7 +377,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    }

    if (
-      !window.confirm(
+      !this.confirmBrowser(
        "Eliminare questo prodotto? L'azione non puo essere annullata.",
      )
    ) {
@@ -412,12 +421,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  startPanelResize(event: PointerEvent): void {
-    if (window.innerWidth <= 1060) {
+    if (!this.isBrowser || window.innerWidth <= 1060) {
      return;
    }
    event.preventDefault();
    this.isResizingPanels = true;
-    document.body.style.cursor = 'col-resize';
+    if (this.documentRef.body) {
+      this.documentRef.body.style.cursor = 'col-resize';
+    }
    this.updateListPanelWidthFromPointer(event.clientX);
  }

@@ -507,7 +518,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    }

    if (
-      !window.confirm(
+      !this.confirmBrowser(
        'Eliminare questa categoria? Fallira se contiene sottocategorie o prodotti.',
      )
    ) {
@@ -642,7 +653,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      (_, currentIndex) => currentIndex !== index,
    );
    if (!nextMaterials.some((material) => material.isDefault)) {
-      nextMaterials[0].isDefault = true;
+      nextMaterials[0] = {
+        ...nextMaterials[0],
+        isDefault: true,
+        defaultColorKey: this.resolveMaterialDefaultColorKey(
+          nextMaterials[0].materialCode,
+          nextMaterials[0].defaultColorKey,
+        ),
+      };
    }
    this.productForm.materials = nextMaterials;
  }
@@ -652,10 +670,34 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      (material, currentIndex) => ({
        ...material,
        isDefault: currentIndex === index,
+        defaultColorKey: this.resolveMaterialDefaultColorKey(
+          material.materialCode,
+          material.defaultColorKey,
+        ),
      }),
    );
  }

+  onMaterialCodeChange(index: number, nextMaterialCode: string): void {
+    const normalizedMaterialCode = nextMaterialCode.trim().toUpperCase();
+    this.productForm.materials = this.productForm.materials.map(
+      (material, currentIndex) => {
+        if (currentIndex !== index) {
+          return material;
+        }
+
+        return {
+          ...material,
+          materialCode: normalizedMaterialCode,
+          defaultColorKey: this.resolveMaterialDefaultColorKey(
+            normalizedMaterialCode,
+            material.defaultColorKey,
+          ),
+        };
+      },
+    );
+  }
+
  availableMaterialChoices(currentMaterialCode: string): string[] {
    const normalizedCurrentMaterialCode = currentMaterialCode
      .trim()
@@ -693,6 +735,22 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      .slice(0, 6);
  }

+  materialColorOptions(
+    materialCode: string,
+  ): Array<{ key: string; label: string }> {
+    const normalizedMaterialCode = materialCode.trim().toUpperCase();
+    return this.stockVariantsForMaterial(normalizedMaterialCode).map(
+      (variant) => ({
+        key: this.variantKey(
+          normalizedMaterialCode,
+          variant.colorName,
+          variant.colorHex,
+        ),
+        label: this.stockVariantLabel(variant),
+      }),
+    );
+  }
+
  onModelFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement | null;
    const file = input?.files?.[0] ?? null;
@@ -759,9 +817,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      return;
    }

-    if (
-      !window.confirm('Rimuovere il modello 3D associato a questo prodotto?')
-    ) {
+    if (!this.confirmBrowser('Rimuovere il modello 3D associato a questo prodotto?')) {
      return;
    }

@@ -832,7 +888,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    this.imageUploadState = {
      ...this.imageUploadState,
      file,
-      previewUrl: URL.createObjectURL(file),
+      previewUrl: this.isBrowser ? URL.createObjectURL(file) : null,
      translations: nextTranslations,
    };
  }
@@ -1008,7 +1064,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      return;
    }

-    if (!window.confirm('Rimuovere questa immagine dal prodotto?')) {
+    if (!this.confirmBrowser('Rimuovere questa immagine dal prodotto?')) {
      return;
    }

@@ -1120,6 +1176,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private restoreListPanelWidth(): void {
+    if (!this.isBrowser) {
+      return;
+    }
    const storedValue = window.localStorage.getItem(
      SHOP_LIST_PANEL_WIDTH_STORAGE_KEY,
    );
@@ -1134,6 +1193,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private persistListPanelWidth(): void {
+    if (!this.isBrowser) {
+      return;
+    }
    window.localStorage.setItem(
      SHOP_LIST_PANEL_WIDTH_STORAGE_KEY,
      String(this.listPanelWidthPercent),
@@ -1282,6 +1344,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  ): ProductMaterialFormState {
    return {
      materialCode,
+      defaultColorKey: this.resolveMaterialDefaultColorKey(materialCode),
      priceChf: '0.00',
      isDefault,
      isActive: true,
@@ -1361,8 +1424,21 @@ export class AdminShopComponent implements OnInit, OnDestroy {
          (left, right) => (left.sortOrder ?? 0) - (right.sortOrder ?? 0),
        );
        const firstVariant = sortedVariants[0];
+        const defaultVariantForMaterial =
+          materialVariants.find((variant) => variant.isDefault) ?? null;
+        const persistedDefaultColorKey = defaultVariantForMaterial
+          ? this.variantKey(
+              materialCode,
+              defaultVariantForMaterial.colorName,
+              defaultVariantForMaterial.colorHex,
+            )
+          : null;
        return {
          materialCode,
+          defaultColorKey: this.resolveMaterialDefaultColorKey(
+            materialCode,
+            persistedDefaultColorKey,
+          ),
          priceChf: Number(firstVariant?.priceChf ?? 0).toFixed(2),
          isDefault: materialVariants.some((variant) => variant.isDefault),
          isActive: materialVariants.some((variant) => variant.isActive),
@@ -1494,9 +1570,6 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private buildVariantsFromMaterials(): AdminUpsertShopProductVariantPayload[] {
-    const persistedDefaultVariant = this.selectedProduct?.variants.find(
-      (variant) => variant.isDefault,
-    );
    const existingVariantsByKey = new Map(
      (this.selectedProduct?.variants ?? []).map((variant) => [
        this.variantKey(
@@ -1507,14 +1580,6 @@ export class AdminShopComponent implements OnInit, OnDestroy {
        variant,
      ]),
    );
-    const persistedDefaultKey = persistedDefaultVariant
-      ? this.variantKey(
-          persistedDefaultVariant.internalMaterialCode,
-          persistedDefaultVariant.colorName,
-          persistedDefaultVariant.colorHex,
-        )
-      : null;
-
    const variants: AdminUpsertShopProductVariantPayload[] = [];
    let defaultAssigned = false;

@@ -1525,20 +1590,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    for (const material of sortedMaterials) {
      const materialCode = material.materialCode.trim().toUpperCase();
      const stockVariants = this.stockVariantsForMaterial(materialCode);
-      let defaultVariantKeyForMaterial: string | null = null;
-
-      if (material.isDefault && persistedDefaultKey) {
-        defaultVariantKeyForMaterial =
-          stockVariants
-            .map((variant) =>
-              this.variantKey(
-                materialCode,
-                variant.colorName,
-                variant.colorHex,
-              ),
-            )
-            .find((variantKey) => variantKey === persistedDefaultKey) ?? null;
-      }
+      const selectedDefaultColorKey = this.resolveMaterialDefaultColorKey(
+        materialCode,
+        material.defaultColorKey,
+      );

      stockVariants.forEach((stockVariant, colorIndex) => {
        const variantKey = this.variantKey(
@@ -1550,9 +1605,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
        const isDefault =
          material.isDefault &&
          !defaultAssigned &&
-          (defaultVariantKeyForMaterial
-            ? variantKey === defaultVariantKeyForMaterial
-            : colorIndex === 0);
+          variantKey === selectedDefaultColorKey;

        variants.push({
          id: existingVariant?.id,
@@ -1623,6 +1676,51 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      });
  }

+  private resolveMaterialDefaultColorKey(
+    materialCode: string,
+    preferredKey?: string | null,
+  ): string {
+    const normalizedMaterialCode = materialCode.trim().toUpperCase();
+    const stockVariants = this.stockVariantsForMaterial(normalizedMaterialCode);
+    if (stockVariants.length === 0) {
+      return '';
+    }
+
+    const normalizedPreferredKey = (preferredKey ?? '').trim();
+    if (
+      normalizedPreferredKey &&
+      stockVariants.some(
+        (variant) =>
+          this.variantKey(
+            normalizedMaterialCode,
+            variant.colorName,
+            variant.colorHex,
+          ) === normalizedPreferredKey,
+      )
+    ) {
+      return normalizedPreferredKey;
+    }
+
+    const firstVariant = stockVariants[0];
+    return this.variantKey(
+      normalizedMaterialCode,
+      firstVariant.colorName,
+      firstVariant.colorHex,
+    );
+  }
+
+  private stockVariantLabel(variant: AdminFilamentVariant): string {
+    const colorName = variant.colorName.trim();
+    const variantDisplayName = variant.variantDisplayName.trim();
+    if (
+      variantDisplayName &&
+      variantDisplayName.toLowerCase() !== colorName.toLowerCase()
+    ) {
+      return `${colorName} (${variantDisplayName})`;
+    }
+    return colorName;
+  }
+
  private nextAvailableMaterialCode(): string | null {
    const selectedCodes = new Set(
      this.productForm.materials
@@ -1741,6 +1839,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private revokeImagePreviewUrl(previewUrl: string | null): void {
+    if (!this.isBrowser) {
+      return;
+    }
    if (previewUrl?.startsWith('blob:')) {
      URL.revokeObjectURL(previewUrl);
    }
@@ -1863,12 +1964,15 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private applyDescriptionExecCommand(command: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
    const editor = this.descriptionEditorElement;
    if (!editor) {
      return;
    }
    editor.focus();
-    document.execCommand(command, false);
+    this.documentRef.execCommand(command, false);
    this.syncDescriptionFromEditor(editor, false);
  }

@@ -1912,6 +2016,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private sanitizeRichTextHtml(value: string): string {
+    if (!this.isBrowser) {
+      return this.stripPotentiallyUnsafeHtml(value);
+    }
+
    const parser = new DOMParser();
    const sourceDocument = parser.parseFromString(
      `<body>${value}</body>`,
@@ -2017,12 +2125,18 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private extractTextFromHtml(value: string): string {
+    if (!this.isBrowser) {
+      return value.replace(/<[^>]+>/g, ' ');
+    }
    const parser = new DOMParser();
    const parsed = parser.parseFromString(`<body>${value}</body>`, 'text/html');
    return parsed.body.textContent ?? '';
  }

  private serializeNodeChildren(node: Node): string {
+    if (!this.isBrowser) {
+      return node.textContent ?? '';
+    }
    const serializer = new XMLSerializer();
    let html = '';
    for (const child of Array.from(node.childNodes)) {
@@ -2035,6 +2149,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    element: HTMLElement,
    html: string,
  ): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
    if (!html) {
      element.replaceChildren();
      return;
@@ -2043,11 +2161,21 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    const parser = new DOMParser();
    const parsed = parser.parseFromString(`<body>${html}</body>`, 'text/html');
    const nodes = Array.from(parsed.body.childNodes).map((child) =>
-      document.importNode(child, true),
+      this.documentRef.importNode(child, true),
    );
    element.replaceChildren(...nodes);
  }

+  private confirmBrowser(message: string): boolean {
+    return this.isBrowser ? window.confirm(message) : false;
+  }
+
+  private stripPotentiallyUnsafeHtml(value: string): string {
+    return value
+      .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+      .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '');
+  }
+
  private escapeHtml(value: string): string {
    return value
      .replace(/&/g, '&amp;')
--- a/frontend/src/app/features/calculator/calculator-page.component.ts
+++ b/frontend/src/app/features/calculator/calculator-page.component.ts
@@ -5,8 +5,10 @@ import {
  ViewChild,
  ElementRef,
  OnInit,
+  PLATFORM_ID,
+  inject,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { forkJoin, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
@@ -53,6 +55,7 @@ type TrackedPrintSettings = {
  styleUrl: './calculator-page.component.scss',
 })
 export class CalculatorPageComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  mode = signal<'easy' | 'advanced'>('easy');
  step = signal<'upload' | 'quote' | 'details' | 'success'>('upload');

@@ -260,7 +263,7 @@ export class CalculatorPageComponent implements OnInit {

    // Auto-scroll on mobile to make analysis visible
    setTimeout(() => {
-      if (this.resultCol && window.innerWidth < 768) {
+      if (this.isBrowser && this.resultCol && window.innerWidth < 768) {
        this.resultCol.nativeElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
--- a/frontend/src/app/features/contact/components/contact-form/contact-form.component.ts
+++ b/frontend/src/app/features/contact/components/contact-form/contact-form.component.ts
@@ -1,5 +1,12 @@
-import { Component, signal, effect, inject, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  Component,
+  signal,
+  effect,
+  inject,
+  OnDestroy,
+  PLATFORM_ID,
+} from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import {
  ReactiveFormsModule,
  FormBuilder,
@@ -16,6 +23,7 @@ import {
 import { QuoteEstimatorService } from '../../../calculator/services/quote-estimator.service';
 import { QuoteRequestService } from '../../../../core/services/quote-request.service';
 import { LanguageService } from '../../../../core/services/language.service';
+import { SuccessStateComponent } from '../../../../shared/components/success-state/success-state.component';

 interface FilePreview {
  file: File;
@@ -23,8 +31,6 @@ interface FilePreview {
  type: 'image' | 'video' | 'pdf' | '3d' | 'document' | 'other';
 }

-import { SuccessStateComponent } from '../../../../shared/components/success-state/success-state.component';
-
@Component({
  selector: 'app-contact-form',
  standalone: true,
@@ -41,6 +47,7 @@ import { SuccessStateComponent } from '../../../../shared/components/success-sta
  styleUrl: './contact-form.component.scss',
 })
 export class ContactFormComponent implements OnDestroy {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  form: FormGroup;
  sent = signal(false);
  files = signal<FilePreview[]>([]);
@@ -127,7 +134,7 @@ export class ContactFormComponent implements OnDestroy {
        return {
          file: f,
          type,
-          url: this.shouldCreatePreview(type)
+          url: this.isBrowser && this.shouldCreatePreview(type)
            ? URL.createObjectURL(f)
            : undefined,
        };
@@ -185,7 +192,7 @@ export class ContactFormComponent implements OnDestroy {
      const preview: FilePreview = {
        file,
        type,
-        url: this.shouldCreatePreview(type)
+        url: this.isBrowser && this.shouldCreatePreview(type)
          ? URL.createObjectURL(file)
          : undefined,
      };
@@ -354,6 +361,9 @@ export class ContactFormComponent implements OnDestroy {
  }

  private revokePreviewUrl(file: FilePreview): void {
+    if (!this.isBrowser) {
+      return;
+    }
    if (file.url?.startsWith('blob:')) {
      URL.revokeObjectURL(file.url);
    }
--- a/frontend/src/app/features/order/order.component.ts
+++ b/frontend/src/app/features/order/order.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, OnInit, PLATFORM_ID, inject, signal } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
@@ -75,6 +75,7 @@ export class OrderComponent implements OnInit {
  private router = inject(Router);
  private quoteService = inject(QuoteEstimatorService);
  private translate = inject(TranslateService);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  orderId: string | null = null;
  selectedPaymentMethod: 'twint' | 'bill' | null = 'twint';
@@ -115,6 +116,9 @@ export class OrderComponent implements OnInit {
  }

  downloadQrInvoice() {
+    if (!this.isBrowser) {
+      return;
+    }
    const orderId = this.orderId;
    if (!orderId) return;
    this.quoteService.getOrderConfirmation(orderId).subscribe({
@@ -153,7 +157,7 @@ export class OrderComponent implements OnInit {

  openTwintPayment(): void {
    const openUrl = this.twintOpenUrl();
-    if (typeof window !== 'undefined' && openUrl) {
+    if (this.isBrowser && openUrl) {
      window.open(openUrl, '_blank');
    }
  }
--- a/frontend/src/app/features/shop/product-detail.component.ts
+++ b/frontend/src/app/features/shop/product-detail.component.ts
@@ -1,8 +1,9 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import {
  Component,
  DestroyRef,
  Injector,
+  PLATFORM_ID,
  computed,
  inject,
  input,
@@ -62,6 +63,7 @@ export class ProductDetailComponent {
  private readonly seoService = inject(SeoService);
  private readonly languageService = inject(LanguageService);
  private readonly shopRouteService = inject(ShopRouteService);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  readonly shopService = inject(ShopService);

  readonly categorySlug = input<string | undefined>();
@@ -444,7 +446,7 @@ export class ProductDetailComponent {

  goBackToShop(): void {
    const returnUrl =
-      typeof history.state?.shopReturnUrl === 'string'
+      this.isBrowser && typeof history.state?.shopReturnUrl === 'string'
        ? history.state.shopReturnUrl
        : null;

@@ -671,6 +673,15 @@ export class ProductDetailComponent {
    if (!this.containsHtmlMarkup(normalized)) {
      return normalized;
    }
+
+    if (!this.isBrowser) {
+      const text = normalized
+        .replace(/<[^>]+>/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+      return text || null;
+    }
+
    const parser = new DOMParser();
    const parsed = parser.parseFromString(
      `<body>${normalized}</body>`,
@@ -694,6 +705,10 @@ export class ProductDetailComponent {
  }

  private syncPublicUrl(product: ShopProductDetail): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
    const currentProductSlug = this.productSlug()?.trim().toLowerCase() ?? '';
    const targetProductSlug = this.shopRouteService.productPathSegment(product);
    if (currentProductSlug === targetProductSlug) {