@startinblox/components-ds4go 3.3.7 → 4.0.0

package/src/components/modal/ds4go-catalog-modal.ts

@@ -1,18 +1,10 @@
-import { formatDate } from "@helpers";
+import { dspAgreementStorage, dspPolicyHelpers } from "@helpers";
 import { localized, msg } from "@lit/localize";
-import type { TemplateResultOrSymbol } from "@src/component";
-import {
-  DSPContractStorage,
-  offerKindActionHandler,
-  offerKindHandler,
-  rdf,
-  TemsObjectHandler,
-} from "@startinblox/solid-tems-shared";
+import { TemsObjectHandler } from "@startinblox/solid-tems-shared";
 import ModalStyle from "@styles/modal/ds4go-catalog-modal.scss?inline";
-import { css, html, nothing, type TemplateResult, unsafeCSS } from "lit";
+import type { DSPOffer, ODRLPolicy } from "@src/ds4go";
+import { css, html, nothing, unsafeCSS } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 @customElement("ds4go-catalog-modal")
 @localized()
@@ -27,6 +19,18 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
   @property({ attribute: false })
   participantId?: string;
 
+  @property({ attribute: false })
+  counterPartyId?: string;
+
+  @property({ attribute: false })
+  counterPartyAddress?: string;
+
+  @property({ attribute: false })
+  providerName?: string;
+
+  @property({ attribute: false })
+  providerColor?: string;
+
   @state()
   negotiationStatus:
     | "idle"
@@ -64,8 +68,7 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
   selectedPolicyIndex?: number;
 
   @state()
-  availablePolicies?: any[];
-
+  availablePolicies?: ODRLPolicy[];
 
   /**
    * Check for existing agreement when component connects
@@ -75,235 +78,6 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     this._checkExistingAgreement();
   }
 
-  /**
-   * Get localStorage key for this asset
-   * Uses combination of provider ID and dataset ID for uniqueness across providers
-   */
-  private _getStorageKey(): string {
-    const obj = this.object as any;
-    const datasetId = obj.datasetId || obj.assetId;
-    // Include provider ID to differentiate assets with same ID from different providers
-    const providerId =
-      obj.counterPartyId || obj._providerParticipantId || obj._provider || "";
-
-    // DEBUG: Log what provider info we're seeing
-    if (!datasetId) return "";
-    // Create composite key: provider-assetId
-    const key = providerId
-      ? `dsp-agreement-${providerId}-${datasetId}`
-      : `dsp-agreement-${datasetId}`;
-    return key;
-  }
-
-  /**
-   * Save agreement info to localStorage
-   */
-  private _saveAgreementInfo(
-    contractId: string,
-    negotiationId: string,
-    timestamp: number,
-  ) {
-    const key = this._getStorageKey();
-    if (key) {
-      const obj = this.object as any;
-      const agreementInfo = {
-        contractId,
-        negotiationId,
-        timestamp,
-        assetId: obj.datasetId || obj.assetId,
-        providerId:
-          obj.counterPartyId ||
-          obj._providerParticipantId ||
-          obj._provider ||
-          "",
-        providerAddress: obj.counterPartyAddress || obj._providerAddress || "",
-      };
-      localStorage.setItem(key, JSON.stringify(agreementInfo));
-    }
-  }
-
-  /**
-   * Load agreement info from localStorage
-   */
-  private _loadAgreementInfo(): {
-    contractId: string;
-    negotiationId: string;
-    timestamp: number;
-    assetId: string;
-  } | null {
-    const key = this._getStorageKey();
-    if (!key) return null;
-
-    try {
-      const stored = localStorage.getItem(key);
-      if (stored) {
-        const info = JSON.parse(stored);
-        return info;
-      }
-    } catch (error) {
-      console.error("Failed to load agreement info:", error);
-    }
-    return null;
-  }
-
-  /**
-   * Save initial contract state when negotiation starts
-   */
-  private _saveInitialContractState(negotiationId: string) {
-    try {
-      const obj = this.object as any;
-
-      // Check if contract already exists for this asset from this provider
-      const providerId = obj.counterPartyId || obj._providerParticipantId || "";
-      const existingContracts = DSPContractStorage.getByAssetAndProvider(
-        obj.assetId || obj.datasetId,
-        providerId,
-      );
-      const existingContract = existingContracts.find(
-        (c) => c.contractId === negotiationId,
-      );
-
-      if (!existingContract) {
-        // Debug: log asset object to see available properties
-
-        // Extract index endpoint URL from asset (dcat:endpointUrl)
-        const indexEndpointUrl =
-          obj["dcat:endpointUrl"] || obj.endpointUrl || obj["endpointUrl"];
-
-        const assetName = obj.name || obj.assetId || "Unknown Asset";
-
-        // Detect if this is an index asset
-        const isIndexAsset = assetName.toLowerCase().includes("index");
-
-        // Create new contract in REQUESTED state
-        DSPContractStorage.create({
-          assetId: obj.assetId || obj.datasetId,
-          datasetId: obj.datasetId || obj.assetId,
-          assetName,
-          assetDescription: obj.description,
-          providerName:
-            obj._provider || obj.provider?.name || "Unknown Provider",
-          providerAddress:
-            obj.counterPartyAddress || obj._providerAddress || "",
-          providerParticipantId:
-            obj.counterPartyId || obj._providerParticipantId || "",
-          providerColor: obj._providerColor,
-          policy: obj.policy,
-          state: "REQUESTED",
-          contractId: negotiationId,
-          // Index-specific fields
-          isIndexAsset,
-          indexEndpointUrl,
-        });
-      }
-    } catch (error) {
-      console.error(
-        "[DSP Contract Catalog] Failed to save initial contract state:",
-        error,
-      );
-    }
-  }
-
-  /**
-   * Save contract to DSP Contract Catalog for history tracking
-   */
-  private _saveToContractCatalog(contractId: string, negotiationId: string) {
-    try {
-      const obj = this.object as any;
-
-      // Debug: log asset object to see available properties for endpoint URL
-
-      // Check if contract already exists - search by contractId (negotiationId) first,
-      // then by agreementId as fallback. Filter by provider to avoid cross-provider confusion.
-      const providerId = obj.counterPartyId || obj._providerParticipantId || "";
-      const existingContracts = DSPContractStorage.getByAssetAndProvider(
-        obj.assetId || obj.datasetId,
-        providerId,
-      );
-      const existingContract = existingContracts.find(
-        (c) => c.contractId === negotiationId || c.agreementId === contractId,
-      );
-
-      // Extract index endpoint URL from asset (dcat:endpointUrl)
-      // Try multiple possible property names - the mapping config adds 'indexEndpointUrl'
-      const indexEndpointUrl =
-        obj.indexEndpointUrl ||
-        obj["dcat:endpointUrl"] ||
-        obj["dcat:endpointURL"] ||
-        obj.endpointUrl ||
-        obj["endpointUrl"] ||
-        obj.endpointURL;
-      const assetName = obj.name || obj.assetId || "Unknown Asset";
-
-      // Detect if this is an index asset
-      const isIndexAsset = assetName.toLowerCase().includes("index");
-
-      if (existingContract) {
-        // Update existing contract with index metadata
-        DSPContractStorage.updateState(existingContract.id, "FINALIZED", {
-          agreementId: contractId,
-          contractId: negotiationId,
-          isIndexAsset,
-          indexEndpointUrl,
-        });
-      } else {
-        // Create new contract entry
-        DSPContractStorage.create({
-          assetId: obj.assetId || obj.datasetId,
-          datasetId: obj.datasetId || obj.assetId,
-          assetName,
-          assetDescription: obj.description,
-          providerName:
-            obj._provider || obj.provider?.name || "Unknown Provider",
-          providerAddress:
-            obj.counterPartyAddress || obj._providerAddress || "",
-          providerParticipantId:
-            obj.counterPartyId || obj._providerParticipantId || "",
-          providerColor: obj._providerColor,
-          policy: obj.policy,
-          state: "FINALIZED",
-          contractId: negotiationId,
-          agreementId: contractId,
-          // Index-specific fields
-          isIndexAsset,
-          indexEndpointUrl,
-        });
-      }
-    } catch (error) {
-      console.error("[DSP Contract Catalog] Failed to save contract:", error);
-    }
-  }
-
-  /**
-   * Update contract state in catalog (for failures)
-   */
-  private _updateContractState(
-    negotiationId: string,
-    state: "FAILED" | "TERMINATED",
-    error?: string,
-  ) {
-    try {
-      const obj = this.object as any;
-      const providerId = obj.counterPartyId || obj._providerParticipantId || "";
-      const existingContracts = DSPContractStorage.getByAssetAndProvider(
-        obj.assetId || obj.datasetId,
-        providerId,
-      );
-      const existingContract = existingContracts.find(
-        (c) => c.contractId === negotiationId,
-      );
-
-      if (existingContract) {
-        DSPContractStorage.updateState(existingContract.id, state, { error });
-      }
-    } catch (error) {
-      console.error(
-        "[DSP Contract Catalog] Failed to update contract state:",
-        error,
-      );
-    }
-  }
-
   /**
    * Check if there's an existing agreement for this asset
    */
@@ -311,8 +85,10 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     if (this.existingAgreementChecked) return;
     this.existingAgreementChecked = true;
 
+    const offer = this.object as DSPOffer;
+
     // Try to load from localStorage
-    const storedInfo = this._loadAgreementInfo();
+    const storedInfo = dspAgreementStorage.loadAgreementInfo(offer);
     if (storedInfo) {
       this.contractId = storedInfo.contractId;
       this.negotiationId = storedInfo.negotiationId;
@@ -323,24 +99,18 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     // Also check if DSP store has the agreement
     try {
       if (this.dspStore && storedInfo?.negotiationId) {
-        // Verify the agreement still exists in the store
-        try {
-          const obj = this.object as any;
-          const providerId =
-            obj.counterPartyId ||
-            obj._providerParticipantId ||
-            obj._provider ||
-            "";
-          await this.dspStore.getContractAgreement(
-            storedInfo.negotiationId,
-            providerId,
-          );
-        } catch (error) {
-          console.warn("Could not verify agreement in store:", error);
-        }
+        const providerId =
+          offer._provider?.participantId ||
+          this.counterPartyId ||
+          this.participantId ||
+          "";
+        await this.dspStore.getContractAgreement(
+          storedInfo.negotiationId,
+          providerId,
+        );
       }
     } catch (error) {
-      console.warn("Error checking DSP store for existing agreement:", error);
+      console.warn("Could not verify agreement in store:", error);
     }
   }
 
@@ -358,26 +128,15 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
       return;
     }
 
-    const key = this._getStorageKey();
-    if (key) {
-      localStorage.removeItem(key);
-    }
+    const offer = this.object as DSPOffer;
 
-    // Also delete from DSPContractStorage - only for this provider's contract
-    const obj = this.object as any;
-    const assetId = obj?.assetId || obj?.datasetId;
-    const providerId = obj?.counterPartyId || obj?._providerParticipantId || "";
-    if (assetId) {
-      const existingContracts = DSPContractStorage.getByAssetAndProvider(
-        assetId,
-        providerId,
-      );
-      for (const contract of existingContracts) {
-        DSPContractStorage.delete(contract.id);
-      }
-    }
+    // Clear from localStorage
+    dspAgreementStorage.clearAgreementInfo(offer);
+
+    // Delete from DSPContractStorage
+    dspAgreementStorage.deleteContractsForAsset(offer);
 
-    // Reset state to idle
+    // Reset state
     this.negotiationStatus = "idle";
     this.contractId = undefined;
     this.negotiationId = undefined;
@@ -386,7 +145,11 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     this.requestUpdate();
   }
 
-  _selectPolicy(index: number) {
+  /**
+   * Handle policy selection
+   */
+  private _handlePolicySelected(e: CustomEvent) {
+    const { index } = e.detail;
     this.selectedPolicyIndex = index;
     this.showPolicySelection = false;
     this.requestUpdate();
@@ -394,121 +157,21 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     this._negotiateAccess();
   }
 
-  _cancelPolicySelection() {
+  /**
+   * Handle policy selection cancellation
+   */
+  private _handlePolicyCancel() {
     this.showPolicySelection = false;
     this.selectedPolicyIndex = undefined;
     this.availablePolicies = undefined;
     this.requestUpdate();
   }
 
-  _formatPolicyDetails(policy: any): string {
-    if (!policy) return "No policy details available";
-
-    const parts: string[] = [];
-
-    // Policy ID
-    if (policy["@id"]) {
-      parts.push(
-        `<div class="policy-detail"><strong>Policy ID:</strong> ${policy["@id"]}</div>`,
-      );
-    }
-
-    // Policy Type
-    if (policy["@type"]) {
-      parts.push(
-        `<div class="policy-detail"><strong>Type:</strong> ${policy["@type"]}</div>`,
-      );
-    }
-
-    // Permissions
-    const permissions = policy["odrl:permission"];
-    if (permissions) {
-      const permArray = Array.isArray(permissions)
-        ? permissions
-        : [permissions];
-      if (permArray.length > 0) {
-        parts.push(
-          '<div class="policy-detail"><strong>Permissions:</strong><ul>',
-        );
-        permArray.forEach((perm: any) => {
-          const action = perm["odrl:action"];
-          const actionStr = action?.["@id"] || action || "use";
-          parts.push(`<li>Action: ${actionStr}</li>`);
-
-          // Constraints
-          if (perm["odrl:constraint"]) {
-            const constraints = Array.isArray(perm["odrl:constraint"])
-              ? perm["odrl:constraint"]
-              : [perm["odrl:constraint"]];
-            constraints.forEach((c: any) => {
-              parts.push(
-                `<li style="margin-left: 20px;">Constraint: ${c["odrl:leftOperand"]} ${c["odrl:operator"]} ${c["odrl:rightOperand"]}</li>`,
-              );
-            });
-          }
-        });
-        parts.push("</ul></div>");
-      }
-    }
-
-    // Prohibitions
-    const prohibitions = policy["odrl:prohibition"];
-    if (prohibitions) {
-      const prohibArray = Array.isArray(prohibitions)
-        ? prohibitions
-        : [prohibitions];
-      if (prohibArray.length > 0) {
-        parts.push(
-          '<div class="policy-detail"><strong>Prohibitions:</strong><ul>',
-        );
-        prohibArray.forEach((prohib: any) => {
-          const action = prohib["odrl:action"];
-          const actionStr = action?.["@id"] || action || "unknown";
-          parts.push(`<li>Action: ${actionStr}</li>`);
-        });
-        parts.push("</ul></div>");
-      }
-    }
-
-    // Obligations
-    const obligations = policy["odrl:obligation"];
-    if (obligations) {
-      const obligArray = Array.isArray(obligations)
-        ? obligations
-        : [obligations];
-      if (obligArray.length > 0) {
-        parts.push(
-          '<div class="policy-detail"><strong>Obligations:</strong><ul>',
-        );
-        obligArray.forEach((oblig: any) => {
-          const action = oblig["odrl:action"];
-          const actionStr = action?.["@id"] || action || "unknown";
-          parts.push(`<li>Action: ${actionStr}</li>`);
-        });
-        parts.push("</ul></div>");
-      }
-    }
-
-    // Target
-    if (policy.target) {
-      parts.push(
-        `<div class="policy-detail"><strong>Target Asset:</strong> ${policy.target}</div>`,
-      );
-    }
-
-    // Assigner
-    if (policy.assigner) {
-      parts.push(
-        `<div class="policy-detail"><strong>Assigner:</strong> ${policy.assigner}</div>`,
-      );
-    }
-
-    return parts.length > 0 ? parts.join("") : "No policy details available";
-  }
-
+  /**
+   * Negotiate access to the dataset
+   */
   async _negotiateAccess() {
     try {
-      // Use the DSP store passed as property
       if (!this.dspStore) {
         throw new Error(
           "DSP connector not configured. Please provide participant-connector-uri and participant-api-key attributes.",
@@ -516,86 +179,29 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
       }
 
       const dspStore = this.dspStore;
-
-      // DEBUG: Log store configuration to verify correct store is being used
-      // Use pre-processed contract negotiation fields from the mapped Destination object
-      // These fields are extracted and processed by FederatedCatalogueStore.mapSourceToDestination()
-      const obj = this.object as any;
-      const counterPartyAddress = obj.counterPartyAddress;
-      const counterPartyId = obj.counterPartyId || this.participantId;
-      const datasetId = obj.datasetId;
-
-      // DEFENSIVE: Handle case where obj.policy might be an array or have numeric keys
-      let policies = obj.policies;
-      let rawPolicy = obj.policy;
-
-      // If obj.policy is an array, convert it to policies array
-      if (Array.isArray(rawPolicy)) {
-        console.warn(
-          "[tems-modal] obj.policy is an array! Converting to policies array.",
-        );
-
-        // Check if array object has a "target" property
-        const target = (rawPolicy as any).target;
-
-        // Filter out non-policy properties (like "target")
-        policies = rawPolicy.filter(
-          (item: any) => item && typeof item === "object" && item["@id"],
-        );
-
-        // Add target to each policy if it exists and policy doesn't have one
-        if (target) {
-          policies = policies.map((p: any) => {
-            if (!p.target && !p["odrl:target"]) {
-              return { ...p, target, "odrl:target": target };
-            }
-            return p;
-          });
-        }
-
-        rawPolicy = policies.length > 0 ? policies[0] : rawPolicy[0]; // Use first valid policy as default
-      }
-      // If obj.policy is an object with numeric keys (array-like object)
-      else if (rawPolicy && typeof rawPolicy === "object") {
-        const keys = Object.keys(rawPolicy);
-        const hasNumericKeys = keys.some((k) => /^\d+$/.test(k));
-        if (hasNumericKeys) {
-          console.warn(
-            "[tems-modal] obj.policy has numeric keys! Extracting policies array.",
-          );
-
-          // Check if object has a "target" property
-          const target = rawPolicy.target;
-
-          // Extract policies from numeric keys
-          const extractedPolicies = [];
-          for (const key in rawPolicy) {
-            if (/^\d+$/.test(key)) {
-              let policy = rawPolicy[key];
-              // Add target if it exists and policy doesn't have one
-              if (target && !policy.target && !policy["odrl:target"]) {
-                policy = { ...policy, target, "odrl:target": target };
-              }
-              extractedPolicies.push(policy);
-            }
-          }
-          if (extractedPolicies.length > 0) {
-            policies = extractedPolicies;
-            rawPolicy = extractedPolicies[0]; // Use first as default
-          }
-        }
-      }
+      const offer = this.object as DSPOffer;
+
+      // Extract required fields from props and offer
+      const counterPartyAddress =
+        this.counterPartyAddress || offer._provider?.address || "";
+      const counterPartyId =
+        offer._provider?.participantId ||
+        this.counterPartyId ||
+        this.participantId;
+      const datasetId = offer["@id"] || offer.id;
+
+      // Extract and process policies from new format
+      const { policies, defaultPolicy } = dspPolicyHelpers.extractPolicies(
+        offer["odrl:hasPolicy"],
+      );
 
       // Check if there are multiple policies available
-
       if (
         policies &&
         policies.length > 1 &&
         this.selectedPolicyIndex === undefined
       ) {
-        // Store policies in state for the modal to access
         this.availablePolicies = policies;
-        // Show policy selection UI
         this.showPolicySelection = true;
         this.requestUpdate();
         return;
@@ -607,18 +213,12 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
           ? this.availablePolicies[this.selectedPolicyIndex]
           : this.selectedPolicyIndex !== undefined && policies
             ? policies[this.selectedPolicyIndex]
-            : rawPolicy;
-
-      this.selectedPolicyIndex !== undefined && this.availablePolicies
-        ? "availablePolicies[index]"
-        : this.selectedPolicyIndex !== undefined && policies
-          ? "policies[index]"
-          : "rawPolicy (fallback)";
+            : defaultPolicy;
 
       // Validate required fields
       if (!counterPartyAddress) {
         throw new Error(
-          "No provider endpoint URL (counterPartyAddress) found in service object",
+          "No provider endpoint URL (counterPartyAddress) configured",
         );
       }
 
@@ -630,24 +230,16 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
         throw new Error("No policy found for dataset");
       }
 
-      // FINAL SAFEGUARD: Ensure policy doesn't have numeric keys
-      if (policy && typeof policy === "object") {
-        const policyKeys = Object.keys(policy);
-        const hasNumericKeys = policyKeys.some((k) => /^\d+$/.test(k));
-        if (hasNumericKeys) {
-          console.error(
-            "[tems-modal] ERROR: Policy still has numeric keys after processing!",
-            policy,
-          );
-          throw new Error(
-            "Invalid policy structure detected. Policy must be a single object, not an array.",
-          );
-        }
+      // Validate policy structure
+      if (!dspPolicyHelpers.validatePolicyStructure(policy)) {
+        throw new Error(
+          "Invalid policy structure detected. Policy must be a single object, not an array.",
+        );
       }
 
       if (!counterPartyId) {
         throw new Error(
-          "No participant ID configured. Please provide participant-id attribute or ensure dspace:participantId is in the service data.",
+          "No participant ID configured. Please provide participant-id attribute.",
         );
       }
 
@@ -656,15 +248,11 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
       this.negotiationError = undefined;
       this.requestUpdate();
 
-      // The policy already has the target field set by FederatedCatalogueStore
-      // and all urn:tems: prefixes have been stripped
-      const processedPolicy = policy;
-
       // Initiate contract negotiation
       const negotiationId = await dspStore.negotiateContract(
         counterPartyAddress,
         datasetId,
-        processedPolicy,
+        policy,
         counterPartyId,
       );
 
@@ -673,7 +261,7 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
       this.requestUpdate();
 
       // Save initial contract state to catalog
-      this._saveInitialContractState(negotiationId);
+      dspAgreementStorage.saveInitialContractState(offer, negotiationId);
 
       // Poll for negotiation status
       await this._pollNegotiationStatus(dspStore, negotiationId);
@@ -684,7 +272,9 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
 
       // Update contract state if negotiation was initiated
       if (this.negotiationId) {
-        this._updateContractState(
+        const offer = this.object as DSPOffer;
+        dspAgreementStorage.updateContractState(
+          offer,
           this.negotiationId,
           "FAILED",
           this.negotiationError,
@@ -695,6 +285,9 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     }
   }
 
+  /**
+   * Poll for negotiation status
+   */
   async _pollNegotiationStatus(dspStore: any, negotiationId: string) {
     const maxAttempts = 8;
     const pollInterval = 5000;
@@ -709,13 +302,13 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
         this.requestUpdate();
 
         if (status.state === "FINALIZED" || status.state === "AGREED") {
-          // Retrieve contract agreement (pass providerId to properly key the agreement)
-          const obj = this.object as any;
+          const offer = this.object as DSPOffer;
           const providerId =
-            obj.counterPartyId ||
-            obj._providerParticipantId ||
-            obj._provider ||
+            offer._provider?.participantId ||
+            this.counterPartyId ||
+            this.participantId ||
             "";
+
           try {
             const agreement = await dspStore.getContractAgreement(
               negotiationId,
@@ -729,14 +322,23 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
             this.contractId = status.contractAgreementId || negotiationId;
           }
 
-          // Save agreement info to localStorage for persistence
+          // Save agreement info to localStorage
           if (this.contractId && negotiationId) {
-            this._saveAgreementInfo(this.contractId, negotiationId, Date.now());
+            dspAgreementStorage.saveAgreementInfo(
+              offer,
+              this.contractId,
+              negotiationId,
+              Date.now(),
+            );
           }
 
-          // Save contract to DSP Contract Storage for catalog display
+          // Save contract to DSP Contract Storage
           if (this.contractId) {
-            this._saveToContractCatalog(this.contractId, negotiationId);
+            dspAgreementStorage.saveToContractCatalog(
+              offer,
+              this.contractId,
+              negotiationId,
+            );
           }
 
           this.negotiationStatus = "granted";
@@ -748,7 +350,9 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
           this.negotiationStatus = "failed";
           this.negotiationError =
             status.errorDetail || "Negotiation terminated";
-          this._updateContractState(
+          const offer = this.object as DSPOffer;
+          dspAgreementStorage.updateContractState(
+            offer,
             negotiationId,
             "TERMINATED",
             this.negotiationError,
@@ -771,660 +375,29 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
     this.negotiationStatus = "failed";
     this.negotiationError =
       "Negotiation timeout after 40 seconds - may still be processing on provider side";
-    this._updateContractState(negotiationId, "FAILED", this.negotiationError);
-    this.requestUpdate();
-  }
-
-
-  _renderBoolean(field: boolean): TemplateResultOrSymbol {
-    if (field) {
-      return html`<tems-badge class="badges" type="success" size="sm"
-        ><icon-ci-check></icon-ci-check
-      ></tems-badge>`;
-    }
-    return html`<tems-badge class="badges" type="error" size="sm"
-      ><icon-material-symbols-close-rounded></icon-material-symbols-close-rounded
-    ></tems-badge>`;
-  }
-
-  _renderDivision(type: string, label: string): TemplateResult {
-    return html`<tems-division type="${type}"
-      ><div>${unsafeHTML(String(label))}</div></tems-division
-    >`;
-  }
-
-  _renderBadge(type?: string, label?: string): TemplateResultOrSymbol {
-    if (!label) return nothing;
-    return html`<tems-badge
-      type=${type}
-      label=${label}
-      size="sm"
-    ></tems-badge>`;
-  }
-
-  _renderButton(
-    iconLeft?: TemplateResult,
-    size?: string,
-    label?: string,
-    type?: string,
-    url?: string,
-    iconRight?: TemplateResult,
-    disabled?: boolean,
-  ): TemplateResultOrSymbol {
-    if (!label) return nothing;
-    return html`<tems-button
-      .iconLeft=${ifDefined(iconLeft)}
-      .iconRight=${ifDefined(iconRight)}
-      size=${ifDefined(size)}
-      label=${ifDefined(label)}
-      type=${ifDefined(type)}
-      url=${ifDefined(url)}
-      disabled=${disabled || nothing}
-    ></tems-button>`;
-  }
-
-  _renderIframe(url: string): TemplateResult {
-    return html`<iframe src="${url}"></iframe>`;
-  }
-
-  _renderKindBadgeComponent(
-    object: rdf.DataOffer | undefined = undefined,
-  ): TemplateResultOrSymbol {
-    const data_offer = object || this.object;
-    if (!data_offer.offers || data_offer.offers.length === 0) return nothing;
-
-    return html`<div class="badges">
-      ${data_offer.offers.map((offer: rdf.Offer) =>
-        this._renderBadge("information", offerKindHandler(offer.kind)),
-      )}
-    </div> `;
-  }
-
-  _renderCategoryBadgeComponent(): TemplateResultOrSymbol {
-    const badgeType: string = this.isType(rdf.RDFTYPE_DATAOFFER)
-      ? "default"
-      : "information";
-    if (!this.object.categories || this.object.categories.length === 0)
-      return nothing;
-
-    return html`<div class="badges">
-      ${this.object.categories.length === 0
-        ? this._renderBadge(badgeType, msg("No category"))
-        : this.object.categories.map((category: rdf.NamedResource) =>
-            this._renderBadge(badgeType, category.name || ""),
-          )}
-    </div>`;
-  }
-
-  _renderDescription(): TemplateResult {
-    return this._renderDivision("body-m", this.object.description);
-  }
-
-  _renderTitleValueDivision(
-    title: string,
-    value: string | undefined,
-  ): TemplateResultOrSymbol {
-    if (!value) return nothing;
-    return html`${this._renderDivision("h4", title)}
-    ${this._renderDivision("body-m", value)}`;
-  }
-
-  _renderLicences(): TemplateResult {
-    return html`<div>
-      ${this.object.licences.length !== 0
-        ? html`${this._renderDivision("h4", msg("Licences"))}
-          ${this.object.licences.map((licence: rdf.Licence) => {
-            if (!licence.name) return nothing;
-            return html`<tems-division type="body-m">
-              ${licence.url
-                ? html`<a href=${licence.url} target="_blank"
-                    >${licence.name || msg("See more")}
-                    <icon-mingcute-arrow-right-up-line></icon-mingcute-arrow-right-up-line
-                  ></a>`
-                : html`${licence.name}`}</tems-division
-            > `;
-          })}`
-        : html`${this._renderDivision("h4", msg("Licences"))}
-            <tems-division type="body-m">-</tems-division>`}
-    </div>`;
-  }
-
-  _renderBgImg(imgSrc: string, className: string) {
-    if (!imgSrc) {
-      return nothing;
-    }
-    return html`<div
-      class="${className}"
-      style="background-image: url('${imgSrc}')"
-    ></div>`;
-  }
-
-  _renderImageSingle(): TemplateResultOrSymbol {
-    if (!this.object.image && !this.object.images) {
-      return nothing;
-    }
-
-    const images = [];
-
-    if (this.object.image) {
-      images.push(this.object.image);
-    }
-
-    if (this.object.images) {
-      images.push(...this.object.images);
-    }
-
-    return html`<div class="default-image-grid">
-      ${images.map((image: rdf.Image) => {
-        if (image.iframe && image.url) {
-          return html`${this._renderIframe(image.url)}`;
-        }
-
-        return html`<img
-        class="default-img"
-        src=${image.url}
-        alt=${ifDefined(image.name)}
-      ></div>`;
-      })}
-    </div>`;
-  }
-
-  _renderImageArray(): TemplateResultOrSymbol {
-    const iframe = this.object.images.filter(
-      (image: rdf.Image) => image.iframe && image.url,
+    const offer = this.object as DSPOffer;
+    dspAgreementStorage.updateContractState(
+      offer,
+      negotiationId,
+      "FAILED",
+      this.negotiationError,
     );
-    if (iframe.length > 0) {
-      return html`${this._renderIframe(iframe[0].url)}`;
-    }
-
-    const filteredImages = this.object.images.filter(
-      (image: rdf.Image) => !image.iframe && image.url,
-    );
-
-    const imgCount = filteredImages.length;
-
-    switch (imgCount) {
-      case 0:
-        return nothing;
-      case 1:
-        return html`<div
-          class="main-img"
-          style="background-image: url(${filteredImages[0].url})"
-        ></div>`;
-      case 2:
-        return html`<div class="main-img case-2">
-          ${this._renderBgImg(filteredImages[0].url, "full-width")}
-          ${this._renderBgImg(filteredImages[1].url, "full-width")}
-        </div>`;
-      case 3:
-        return html`<div class="main-img case-3">
-          ${this._renderBgImg(filteredImages[0].url, "full-width")}
-          <div class="img-inner-row">
-            <div class="double-image">
-              ${this._renderBgImg(filteredImages[1].url, "")}
-              ${this._renderBgImg(filteredImages[2].url, "")}
-            </div>
-          </div>
-        </div>`;
-      default:
-        return html`<div class="main-img case-4">
-          ${this._renderBgImg(filteredImages[0].url, "full-width")}
-          <div class="img-inner-row">
-            <div class="double-image">
-              ${this._renderBgImg(filteredImages[1].url, "")}
-              ${this._renderBgImg(filteredImages[2].url, "")}
-            </div>
-            ${this._renderBgImg(filteredImages[3].url, "last-img")}
-          </div>
-        </div>`;
-    }
-  }
-
-  _renderAboutProvider(): TemplateResultOrSymbol {
-    if (this.object.providers.length === 0) return nothing;
-
-    return html`${this._renderDivision("h4", msg("Providers"))}
-    ${this.object.providers.map(
-      (provider: rdf.Provider) =>
-        html`<div>
-            <img
-              src="${provider.image?.url}"
-              alt=${provider.name}
-              class="default-img"
-            />
-          </div>
-          ${this._renderTitleValueDivision(
-            msg("About the providers"),
-            provider.description || msg("No description provided"),
-          )}`,
-    )}`;
-  }
-
-  _renderCompatibleServices(): TemplateResultOrSymbol {
-    if (this.object.services.length === 0) return nothing;
-
-    return html`${this._renderDivision(
-      "h4",
-      this.isType(rdf.RDFTYPE_PROVIDER)
-        ? msg("Available Services")
-        : msg("Compatible Services"),
-    )}
-    ${this.object.services.map(
-      (service: rdf.Service) =>
-        html`<ds4go-card-dataspace-catalog
-          type="vertical"
-          header=${ifDefined(service.name)}
-          background-img=${ifDefined(service.images?.[0]?.url)}
-          full-size=""
-          content=${ifDefined(service.description)}
-        ></ds4go-card-dataspace-catalog>`,
-    )}`;
-  }
-
-  _renderCompatibleDataOffers(): TemplateResultOrSymbol {
-    if (this.object.data_offers.length === 0) return nothing;
-
-    return html`${this._renderDivision("h4", msg("Available Data Offers"))}
-    ${this.object.data_offers.map(
-      (data_offer: rdf.DataOffer) =>
-        html`<ds4go-card-dataspace-catalog
-          type="vertical"
-          header=${ifDefined(data_offer.name)}
-          background-img=${ifDefined(data_offer.image?.url)}
-          full-size=""
-          content=${ifDefined(data_offer.description)}
-          .tags=${[{ name: data_offer.name, type: "information" }]}
-        ></ds4go-card-dataspace-catalog>`,
-    )}`;
-  }
-  // tags=${this._renderKindBadgeComponent(data_offer)}
-
-  _renderOffers(): TemplateResult {
-    return html`${this._renderDivision("h4", msg("Offers"))}
-    ${this.object.offers.map((offer: rdf.Offer) => {
-      const msgSubscribe: string = offerKindActionHandler(offer.kind);
-
-      if (!msgSubscribe) return nothing;
-      return html`<ds4go-card-dataspace-catalog
-        type="vertical"
-        header=${ifDefined(offer.name)}
-        content=${ifDefined(offer.description)}
-        ><div>
-          ${this._renderButton(
-            undefined,
-            "sm",
-            msgSubscribe,
-            "primary",
-            undefined,
-            undefined,
-            true,
-          )}
-        </div></ds4go-card-dataspace-catalog
-      >`;
-    })}`;
-  }
-
-  _renderColumns(...columns: TemplateResultOrSymbol[]): TemplateResultOrSymbol {
-    const filteredColumns = columns.filter((col) => col !== nothing);
-
-    if (filteredColumns.length === 1) {
-      return columns[0];
-    }
-
-    return html`<div class="multiple-columns flex flex-row flex-1">
-      ${filteredColumns.map(
-        (col) => html`<div class="half flex flex-column wrap">${col}</div>`,
-      )}
-    </div>`;
-  }
-
-
-  _renderServiceSpecificModal(): TemplateResultOrSymbol {
-    return html` ${this._renderColumns(
-      html`${this.renderTemplateWhenWith(["long_description"], () =>
-        this._renderTitleValueDivision(
-          msg("Features & Functionalities"),
-          this.object.long_description,
-        ),
-      )}${this.renderTemplateWhenWith(
-        [["is_in_app", "is_external", "is_api"]],
-        () =>
-          html`${this._renderDivision("h4", msg("Installation Possible"))}
-            <div class="badges">
-              ${this.renderTemplateWhenWith(
-                ["is_in_app"],
-                () =>
-                  html`${this._renderBadge("success", msg("In-App"))}</div>`,
-              )}
-              ${this.renderTemplateWhenWith(
-                ["is_external"],
-                () =>
-                  html`${this._renderBadge("success", msg("External"))}</div>`,
-              )}
-              ${this.renderTemplateWhenWith(
-                ["is_api"],
-                () => html`${this._renderBadge("success", msg("API"))}</div>`,
-              )}
-            </div>`,
-      )}${this.renderTemplateWhenWith(
-        ["developper", "developper.url"],
-        () =>
-          html`${this._renderDivision("h4", msg("Developper"))}
-            <img
-              src="${this.object.developper.url}"
-              alt=${this.object.developper.name}
-              class="default-img"
-            />`,
-      )}${this.renderTemplateWhenWith(["release_date"], () =>
-        this._renderTitleValueDivision(
-          msg("Release Date"),
-          formatDate(this.object.release_date),
-        ),
-      )}${this.renderTemplateWhenWith(["last_update"], () =>
-        this._renderTitleValueDivision(
-          msg("Last Update"),
-          formatDate(this.object.last_update),
-        ),
-      )}${this.renderTemplateWhenWith(["documentation_url"], () =>
-        this._renderButton(
-          undefined,
-          "sm",
-          "Read the full documentation",
-          "outline-gray",
-          this.object.documentation_url,
-        ),
-      )}
-      ${this._renderPolicyDescription()} ${this._renderAgreementInfo()}`,
-    )}`;
-  }
-
-  _renderPolicyDescription(): TemplateResultOrSymbol {
-    const obj = this.object as any;
-    let policy = obj.policy;
-    let policies = obj.policies;
-
-    // DEFENSIVE: Handle case where obj.policy might be an array
-    if (Array.isArray(policy)) {
-      // Extract valid policies from array
-      const extractedPolicies = policy.filter(
-        (item: any) => item && typeof item === "object" && item["@id"],
-      );
-      if (extractedPolicies.length > 0) {
-        policies = extractedPolicies;
-        policy = extractedPolicies[0];
-      }
-    }
-    // DEFENSIVE: Handle case where obj.policy has numeric keys
-    else if (policy && typeof policy === "object") {
-      const keys = Object.keys(policy);
-      const hasNumericKeys = keys.some((k) => /^\d+$/.test(k));
-      if (hasNumericKeys) {
-        const extractedPolicies = [];
-        for (const key in policy) {
-          if (/^\d+$/.test(key)) {
-            extractedPolicies.push(policy[key]);
-          }
-        }
-        if (extractedPolicies.length > 0) {
-          policies = extractedPolicies;
-          policy = extractedPolicies[0];
-        }
-      }
-    }
-
-    // Check if we have multiple policies
-    const hasMultiplePolicies =
-      policies && Array.isArray(policies) && policies.length > 1;
-
-    // Only show if there's a policy
-    if (!policy && (!policies || policies.length === 0)) {
-      return nothing;
-    }
-
-    return html`
-      <div
-        style="margin-top: 24px; padding: 16px; background: #f0f7ff; border-radius: 8px; border: 1px solid #d0e7ff;"
-      >
-        ${hasMultiplePolicies
-          ? html`
-              ${this._renderDivision("h4", msg("Access Policies"))}
-              <div
-                style="margin-bottom: 12px; color: #0066cc; font-size: 0.9em;"
-              >
-                ${msg("Multiple contract policies available for this asset")}
-                (${policies.length})
-              </div>
-              ${policies.map(
-                (p: any, index: number) => html`
-                  <div
-                    style="margin-bottom: 16px; padding: 12px; background: white; border-radius: 6px; border-left: 4px solid #0066cc;"
-                  >
-                    <div
-                      style="font-weight: 600; margin-bottom: 8px; color: #333;"
-                    >
-                      ${msg("Policy")} ${index + 1}
-                      ${p["@id"]
-                        ? html`
-                            <span
-                              style="font-weight: normal; font-size: 0.85em; color: #666; display: block; margin-top: 4px; word-break: break-all; font-family: monospace;"
-                            >
-                              ${p["@id"]}
-                            </span>
-                          `
-                        : nothing}
-                    </div>
-                    <odrl-policy-viewer .policy=${p}></odrl-policy-viewer>
-                  </div>
-                `,
-              )}
-            `
-          : html`
-              ${this._renderDivision("h4", msg("Access Policy"))}
-              <odrl-policy-viewer .policy=${policy}></odrl-policy-viewer>
-            `}
-      </div>
-    `;
-  }
-
-  _renderAgreementInfo(): TemplateResultOrSymbol {
-    // Show agreement info after successful negotiation, regardless of API Gateway config
-    if (this.negotiationStatus !== "granted" || !this.contractId) {
-      return nothing;
-    }
-
-    const storedInfo = this._loadAgreementInfo();
-    const agreementDate = storedInfo?.timestamp
-      ? new Date(storedInfo.timestamp).toLocaleString()
-      : null;
-
-    // Get endpoint URL from asset
-    const obj = this.object as any;
-    const endpointUrl =
-      obj?.endpointUrl ||
-      obj?.["dcat:endpointURL"] ||
-      obj?.distribution?.endpointUrl;
-
-    return html`
-      <div
-        style="margin-top: 24px; padding: 16px; background: #e8f5e9; border-radius: 8px;"
-      >
-        ${this._renderDivision("h4", msg("Contract Agreement"))}
-
-        <div style="font-size: 0.9em; margin-top: 12px;">
-          <div style="margin-bottom: 8px;">
-            <strong>✅ ${msg("Agreement ID:")}</strong>
-            <div
-              style="font-family: monospace; background: white; padding: 8px; border-radius: 4px; margin-top: 4px; word-break: break-all;"
-            >
-              ${this.contractId}
-            </div>
-          </div>
-
-          ${endpointUrl
-            ? html`
-                <div style="margin-bottom: 8px;">
-                  <strong>🔗 ${msg("Endpoint URL:")}</strong>
-                  <div
-                    style="font-family: monospace; background: white; padding: 8px; border-radius: 4px; margin-top: 4px; word-break: break-all;"
-                  >
-                    ${endpointUrl}
-                  </div>
-                </div>
-              `
-            : nothing}
-          ${agreementDate
-            ? html`
-                <div style="opacity: 0.8; font-size: 0.85em;">
-                  <strong>${msg("Agreed on:")}</strong> ${agreementDate}
-                </div>
-              `
-            : nothing}
-        </div>
-
-        <div
-          style="margin-top: 12px; padding: 12px; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 0.85em;"
-        >
-          <div style="margin-bottom: 4px;">
-            <strong>ℹ️ ${msg("Note:")}</strong>
-          </div>
-          <div>
-            ${msg(
-              "You can now use this agreement ID to access the service through the provider's API or data gateway.",
-            )}
-          </div>
-        </div>
-
-        ${storedInfo
-          ? html`
-              <div
-                style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1);"
-              >
-                <button
-                  @click=${this._renewContract}
-                  style="font-size: 0.85em; color: #666; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
-                >
-                  🔄 ${msg("Renegotiate contract")}
-                </button>
-              </div>
-            `
-          : nothing}
-      </div>
-    `;
+    this.requestUpdate();
   }
 
-
-  _closeModal() {
+  /**
+   * Handle close modal
+   */
+  private _closeModal() {
     this.dispatchEvent(new CustomEvent("close"));
   }
 
-  _renderPolicySelection(): TemplateResult {
-    const policies = this.availablePolicies || [];
-
-    return html`
-      <div class="policy-selection-modal">
-        <div class="policy-selection-header">
-          <h3>${msg("Select a Policy")}</h3>
-          <p>
-            ${msg(
-              "Multiple policies are available for this dataset. Please select one to proceed with the negotiation.",
-            )}
-          </p>
-        </div>
-        <div class="policy-selection-list">
-          ${policies.map(
-            (policy: any, index: number) => html`
-              <div
-                class="policy-option"
-                @click=${() => this._selectPolicy(index)}
-              >
-                <div class="policy-option-header">
-                  <strong>${msg("Policy")} ${index + 1}</strong>
-                  ${policy["@id"]
-                    ? html`<code>${policy["@id"]}</code>`
-                    : nothing}
-                </div>
-                <div class="policy-option-details">
-                  ${unsafeHTML(this._formatPolicyDetails(policy))}
-                </div>
-              </div>
-            `,
-          )}
-        </div>
-        <div class="policy-selection-actions">
-          <tems-button
-            type="outline-gray"
-            @click=${this._cancelPolicySelection}
-          >
-            ${msg("Cancel")}
-          </tems-button>
-        </div>
-      </div>
-    `;
-  }
-
-  _renderNegotiationButton(): TemplateResultOrSymbol {
-    // Check if DSP connector is configured (now passed as property)
-
-    const hasDspConnector =
-      this.dspStore !== undefined && this.dspStore !== null;
-
-    if (!hasDspConnector) {
-      return html`<tems-button disabled=""
-        >${msg("Activate this service")}</tems-button
-      >`;
-    }
-
-    // Show policy selection if needed
-    if (this.showPolicySelection) {
-      return this._renderPolicySelection();
-    }
-
-    switch (this.negotiationStatus) {
-      case "idle":
-        return html`<tems-button @click=${this._negotiateAccess}
-          >${msg("Negotiate access")}</tems-button
-        >`;
-
-      case "negotiating":
-        return html`<tems-button disabled="">
-          ${msg("Negotiating...")}
-        </tems-button>`;
-
-      case "pending":
-        return html`<tems-button disabled="">
-          ${this.currentState || msg("Pending")}
-          ${this.attempt ? `(${this.attempt}/${this.maxAttempts})` : ""}
-        </tems-button>`;
-
-      case "granted": {
-        return html`
-          <tems-button disabled="" type="success">
-            ✅ ${msg("Access Granted")}
-          </tems-button>
-        `;
-      }
-
-      case "failed":
-        return html`
-          <div style="display: flex; flex-direction: column; gap: 8px;">
-            <tems-button disabled="" type="error">
-              ❌ ${msg("Failed")}:
-              ${this.negotiationError || msg("Unknown error")}
-            </tems-button>
-            <tems-button @click=${this._negotiateAccess} type="outline-gray">
-              ${msg("Retry")}
-            </tems-button>
-          </div>
-        `;
-
-      default:
-        return html`<tems-button disabled=""
-          >${msg("Activate this service")}</tems-button
-        >`;
-    }
-  }
-
   render() {
+    const offer = this.object as DSPOffer;
+    const { policies, defaultPolicy } = dspPolicyHelpers.extractPolicies(
+      offer["odrl:hasPolicy"],
+    );
+
     return html`<div class="modal">
       <div class="topbar">
         <tems-button
@@ -1432,18 +405,51 @@ export class Ds4goCatalogModal extends TemsObjectHandler {
           type="outline-gray"
           .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
         ></tems-button>
-        <tems-button disabled="">${msg("Integrate Externally")}</tems-button>
-        ${this._renderNegotiationButton()}
+        ${this.showPolicySelection
+          ? nothing
+          : html`<catalog-modal-negotiation-button
+              .dspStore=${this.dspStore}
+              .showPolicySelection=${this.showPolicySelection}
+              .negotiationStatus=${this.negotiationStatus}
+              .currentState=${this.currentState}
+              .attempt=${this.attempt}
+              .maxAttempts=${this.maxAttempts}
+              .negotiationError=${this.negotiationError}
+              @negotiate=${this._negotiateAccess}
+              @retry=${this._negotiateAccess}
+            ></catalog-modal-negotiation-button>`}
       </div>
       <div class="modal-content-wrapper">
         <div class="modal-box">
           <div class="modal-content">
-            ${this._renderDivision("h2", this.object.name)}
-            ${this.renderTemplateWhenWith(
-              ["description"],
-              this._renderDescription,
-            )}
-            ${this._renderServiceSpecificModal()}
+            ${this.showPolicySelection
+              ? html`<catalog-modal-policy-selection
+                  .policies=${policies}
+                  @policy-selected=${this._handlePolicySelected}
+                  @policy-cancel=${this._handlePolicyCancel}
+                ></catalog-modal-policy-selection>`
+              : html`<tems-division type="h2"
+                    ><div>${offer.name || ""}</div></tems-division
+                  >
+                  ${offer.description
+                    ? html`<tems-division type="body-m"
+                        ><div>${offer.description}</div></tems-division
+                      >`
+                    : nothing}
+                  <div class="multiple-columns flex flex-row flex-1">
+                    <catalog-modal-policy-display
+                      .policy=${defaultPolicy}
+                      .policies=${policies}
+                    ></catalog-modal-policy-display>
+                    <catalog-modal-agreement-info
+                      .offer=${offer}
+                      .agreementInfo=${dspAgreementStorage.loadAgreementInfo(
+                        offer,
+                      )}
+                      .contractId=${this.contractId}
+                      @renew-contract=${this._renewContract}
+                    ></catalog-modal-agreement-info>
+                  </div>`}
           </div>
         </div>
       </div>