@startinblox/components-ds4go 3.1.3 → 3.1.4

package/dist/index.js

@@ -1 +1 @@
-import "./index-aCtNDRnY.js";
+import "./index-DQ-N8-vz.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",

package/src/components/catalog/ds4go-customer-holder.ts

@@ -143,7 +143,7 @@ export class Ds4goCustomerHolder extends ComponentObjectsHandler {
       ${this._displayObjects.map((displayObj) => {
         const tags = [
           {
-            name: `${msg(str`Balance: ${displayObj.balance}€`)}`,
+            name: `${msg(str`Balance: ${displayObj.balance}`)}`,
             type: "information",
           },
         ];

package/src/components/modal/customer-modal/ds4go-contract-modal-part.ts

@@ -0,0 +1,240 @@
+import { localized, msg } from "@lit/localize";
+import type {
+  Asset,
+  ContractAgreement,
+  PolicyDefinition,
+  Resource,
+} from "@src/component";
+import ComponentStyle from "@styles/modal/customer-modal/ds4go-contract-modal-part.scss?inline";
+import { css, html, LitElement, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+type ExtendedContractAgreement = ContractAgreement & {
+  relatedBundle?: Resource;
+  relatedAsset?: Asset;
+};
+
+@customElement("ds4go-customer-contract-modal-part")
+@localized()
+export class DS4GOCustomerContractModalPart extends LitElement {
+  static styles = css`
+    ${unsafeCSS(ComponentStyle)}
+  `;
+
+  @state()
+  agreement?: ExtendedContractAgreement;
+
+  @state()
+  assets?: Asset[] = [];
+
+  @state()
+  bundles?: Resource[] = [];
+
+  @state()
+  policies?: PolicyDefinition[] = [];
+
+  @state()
+  expandedAssets = false;
+
+  @state()
+  expandedPolicies = false;
+
+  @state()
+  expandedFacts = false;
+
+  _toggleSection(section: "assets" | "policies" | "facts") {
+    if (section === "assets") {
+      this.expandedAssets = !this.expandedAssets;
+    } else if (section === "policies") {
+      this.expandedPolicies = !this.expandedPolicies;
+    } else if (section === "facts") {
+      this.expandedFacts = !this.expandedFacts;
+    }
+  }
+
+  _getRelatedBundle(asset?: Asset): Resource | undefined {
+    if (!asset?.dataAddress?.baseUrl) {
+      return undefined;
+    }
+    const baseUrl = asset.dataAddress.baseUrl;
+    return this.bundles?.find((bundle: Resource) =>
+      bundle["@id"].includes(baseUrl),
+    );
+  }
+
+  render() {
+    if (!this.agreement || !this.agreement["@id"]) {
+      return nothing;
+    }
+
+    const agreementId = this.agreement["@id"];
+    const relatedAsset = this.assets?.find(
+      (a: Asset) => a["@id"] === this.agreement?.assetId,
+    );
+
+    if (relatedAsset) {
+      this.agreement.relatedAsset = relatedAsset;
+      this.agreement.relatedBundle = this._getRelatedBundle(relatedAsset);
+    }
+
+    const relatedPolicies = this.policies?.filter(
+      (p: PolicyDefinition) => p["@id"] === this.agreement?.policy?.["@id"],
+    );
+
+    return html`<div class="contract-section">
+      <div class="contract-header">
+        <tems-division type="h5">${msg("Contract Agreement")}</tems-division>
+        <tems-division type="body-sm"
+          >${agreementId.split("/").pop()}</tems-division
+        >
+        ${this.agreement.contractSigningDate
+          ? html`<tems-division type="body-sm"
+              >${msg("Signed")}:
+              ${new Date(
+                this.agreement.contractSigningDate,
+              ).toLocaleString()}</tems-division
+            >`
+          : nothing}
+        ${this.agreement.consumerId
+          ? html`<tems-division type="body-sm"
+              >${msg("Consumer")}:
+              ${this.agreement.consumerId.split("/").pop()}</tems-division
+            >`
+          : nothing}
+        ${this.agreement.providerId
+          ? html`<tems-division type="body-sm"
+              >${msg("Provider")}:
+              ${this.agreement.providerId.split("/").pop()}</tems-division
+            >`
+          : nothing}
+      </div>
+
+      ${relatedAsset
+        ? html`<div class="contract-subsection">
+            <div
+              class="collapsible-header"
+              @click=${() => this._toggleSection("assets")}
+            >
+              <tems-division type="body-m"
+                >${msg("Related Asset")}</tems-division
+              >
+              <icon-material-symbols-expand-more
+                class="chevron ${this.expandedAssets ? "expanded" : ""}"
+              ></icon-material-symbols-expand-more>
+            </div>
+            <div
+              class="collapsible-content ${this.expandedAssets
+                ? "expanded"
+                : ""}"
+            >
+              <div class="assets-list">
+                <div class="asset-item">
+                  <tems-division type="body-sm"
+                    >${relatedAsset["@id"].split("/").pop()}</tems-division
+                  >
+                  <tems-division type="body-xs"
+                    >${relatedAsset.dataAddress?.baseUrl ||
+                    msg("No base URL")}</tems-division
+                  >
+                  ${relatedAsset.dataAddress?.type
+                    ? html`<tems-division type="body-xs"
+                        >${msg("Type")}:
+                        ${relatedAsset.dataAddress.type}</tems-division
+                      >`
+                    : nothing}
+                </div>
+              </div>
+            </div>
+          </div>`
+        : nothing}
+      ${this.agreement.relatedBundle
+        ? html`<div class="contract-subsection">
+            <div
+              class="collapsible-header"
+              @click=${() => this._toggleSection("facts")}
+            >
+              <tems-division type="body-m"
+                >${msg("Related Bundle & Facts")}</tems-division
+              >
+              <icon-material-symbols-expand-more
+                class="chevron ${this.expandedFacts ? "expanded" : ""}"
+              ></icon-material-symbols-expand-more>
+            </div>
+            <div
+              class="collapsible-content ${this.expandedFacts
+                ? "expanded"
+                : ""}"
+            >
+              <div class="bundle-info">
+                <tems-division type="h6"
+                  >${msg("Bundle")}:
+                  ${this.agreement.relatedBundle.name ||
+                  this.agreement.relatedBundle["@id"]
+                    .split("/")
+                    .pop()}</tems-division
+                >
+                ${this.agreement.relatedBundle.description
+                  ? html`<tems-division type="body-sm"
+                      >${this.agreement.relatedBundle
+                        .description}</tems-division
+                    >`
+                  : nothing}
+              </div>
+              <tems-division type="h6"
+                >${msg("Facts in this bundle")}</tems-division
+              >
+              <div class="facts-list">
+                ${this.agreement.relatedBundle.facts?.map((fact: Resource) => {
+                  const tags =
+                    fact.categories?.map((c: Resource) => ({
+                      name: c.name,
+                      type: "information",
+                    })) || [];
+                  if (tags.length > 3) {
+                    const overflowTags = tags.length - 3;
+                    tags.splice(3, overflowTags);
+                    tags.push({
+                      name: `+${overflowTags} ${msg("more")}`,
+                      type: "information",
+                    });
+                  }
+                  return html`<ds4go-card-catalog
+                    .object=${import.meta.env.DEV ? fact : nothing}
+                    .tags=${tags}
+                    .header=${fact.name || nothing}
+                    .content=${fact.description || nothing}
+                    date=${fact.updated_at || nothing}
+                  ></ds4go-card-catalog>`;
+                })}
+              </div>
+            </div>
+          </div>`
+        : nothing}
+      ${relatedPolicies && relatedPolicies.length > 0
+        ? html`<div class="contract-subsection">
+            <div
+              class="collapsible-header"
+              @click=${() => this._toggleSection("policies")}
+            >
+              <tems-division type="body-m">${msg("Policies")}</tems-division>
+              <icon-material-symbols-expand-more
+                class="chevron ${this.expandedPolicies ? "expanded" : ""}"
+              ></icon-material-symbols-expand-more>
+            </div>
+            <div
+              class="collapsible-content ${this.expandedPolicies
+                ? "expanded"
+                : ""}"
+            >
+              ${relatedPolicies.map(
+                (policy: PolicyDefinition) =>
+                  html`<ds4go-odrl-policy-modal-part
+                    .policy=${policy}
+                  ></ds4go-odrl-policy-modal-part>`,
+              )}
+            </div>
+          </div>`
+        : nothing}
+    </div>`;
+  }
+}

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

@@ -2,7 +2,12 @@ import { OrbitComponent } from "@helpers";
 import { localized, msg, str } from "@lit/localize";
 import { Task } from "@lit/task";
 import type {
+  Asset,
+  ContractAgreement,
+  ContractNegotiation,
+  NegotiationState,
   OrbitComponent as OrbitComponentConfig,
+  PolicyDefinition,
   Resource,
 } from "@src/component";
 
@@ -10,6 +15,11 @@ import ModalStyle from "@styles/modal/ds4go-customer-modal.scss?inline";
 import { css, html, nothing, unsafeCSS } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
+type ExtendedContractNegotiation = ContractNegotiation & {
+  agreement?: ContractAgreement;
+  relatedBundle?: Resource;
+};
+
 @customElement("ds4go-customer-modal")
 @localized()
 export class Ds4goCustomerModal extends OrbitComponent {
@@ -24,6 +34,33 @@ export class Ds4goCustomerModal extends OrbitComponent {
   @state()
   dspConnector: OrbitComponentConfig | undefined;
 
+  @state()
+  assets: Asset[] = [];
+
+  @state()
+  policies: PolicyDefinition[] = [];
+
+  @state()
+  bundles: Resource[] = [];
+
+  @state()
+  negotiations: ExtendedContractNegotiation[] = [];
+
+  @state()
+  providerNegotiations: ExtendedContractNegotiation[] = [];
+
+  @state()
+  consumerNegotiations: ExtendedContractNegotiation[] = [];
+
+  @state()
+  allAgreements: ContractAgreement[] = [];
+
+  @state()
+  providerAgreements: ContractAgreement[] = [];
+
+  @state()
+  consumerAgreements: ContractAgreement[] = [];
+
   async _afterAttach() {
     // use this.dspConnector.instance to reach the connector
     this.dspConnector = this.orbit?.components.find(
@@ -37,13 +74,170 @@ export class Ds4goCustomerModal extends OrbitComponent {
     this.dispatchEvent(new CustomEvent("close"));
   }
 
+  _getNegotiationTags(negotiation: ExtendedContractNegotiation) {
+    const tags: Array<{ name: string; type: string }> = [
+      {
+        name: `State: ${negotiation.state}`,
+        type: this._getNegotiationStateType(negotiation.state),
+      },
+    ];
+
+    if (negotiation.counterPartyId) {
+      const counterPartyId = negotiation.counterPartyId.split("/").pop() || "";
+      const truncatedCounterPartyId =
+        counterPartyId.length > 15
+          ? `${counterPartyId.substring(0, 15)}...`
+          : counterPartyId;
+      tags.push({
+        name: `Counterparty: ${truncatedCounterPartyId}`,
+        type: "information",
+      });
+    }
+
+    if (negotiation.agreement) {
+      tags.push({
+        name: msg("Has Agreement"),
+        type: "success",
+      });
+    }
+
+    return tags;
+  }
+
+  _getNegotiationStateType(state: NegotiationState): string {
+    const successStates = ["FINALIZED", "VERIFIED", "AGREED"];
+    const warningStates = ["TERMINATING", "TERMINATED"];
+
+    if (successStates.includes(state)) {
+      return "success";
+    }
+    if (warningStates.includes(state)) {
+      return "warning";
+    }
+    return "information";
+  }
+
   _getResource = new Task(this, {
     task: async () => {
       if (!this.object) return;
 
       if (this.dspConnector?.instance) {
-        await this.dspConnector.instance.loadContracts();
-        console.log(this.dspConnector.instance.contracts);
+        // Get all data from DSP connector
+        await this.dspConnector.instance.loadAll();
+
+        this.assets = this.dspConnector.instance.assets || [];
+        this.policies = this.dspConnector.instance.policies || [];
+
+        // Get all fact bundles from the connector's datas
+        const allDatas = this.dspConnector.instance.datas || [];
+        this.bundles = allDatas.filter((data: Resource) => {
+          const type = data["@type"];
+          if (Array.isArray(type)) {
+            return type.includes("ds4go:FactBundle");
+          }
+          return type === "ds4go:FactBundle";
+        });
+
+        const participantId = this.object.participant_id;
+        if (participantId) {
+          // Load agreements for all negotiations to find consumer/provider relationships
+          const allNegotiations = this.dspConnector.instance.negotiations || [];
+          const negotiationToAgreementMap = new Map<
+            string,
+            ContractAgreement
+          >();
+
+          await Promise.all(
+            allNegotiations.map(async (n: ContractNegotiation) => {
+              if (n.contractAgreementId) {
+                const agreement =
+                  await this.dspConnector?.instance?.loadAgreement(n["@id"]);
+                if (agreement) {
+                  this.allAgreements.push(agreement);
+                  negotiationToAgreementMap.set(n["@id"], agreement);
+                }
+              }
+            }),
+          );
+
+          // Separate agreements by provider/consumer role
+          this.providerAgreements = this.allAgreements.filter(
+            (a: ContractAgreement) => {
+              if (!a.providerId) return false;
+              const providerParticipantId = a.providerId.split("/").pop();
+              return providerParticipantId?.startsWith(participantId);
+            },
+          );
+
+          this.consumerAgreements = this.allAgreements.filter(
+            (a: ContractAgreement) => {
+              if (!a.consumerId) return false;
+              const consumerParticipantId = a.consumerId.split("/").pop();
+              return consumerParticipantId?.startsWith(participantId);
+            },
+          );
+
+          // Get negotiation IDs where participant is consumer or provider in the agreement
+          const negotiationIdsWithParticipant = Array.from(
+            negotiationToAgreementMap.entries(),
+          )
+            .filter(([, agreement]) => {
+              const providerParticipantId = agreement.providerId
+                ?.split("/")
+                .pop();
+              const consumerParticipantId = agreement.consumerId
+                ?.split("/")
+                .pop();
+              return (
+                providerParticipantId?.startsWith(participantId) ||
+                consumerParticipantId?.startsWith(participantId)
+              );
+            })
+            .map(([negotiationId]) => negotiationId);
+
+          // Filter negotiations where counterPartyId === participant_id OR participant is in agreements
+          this.negotiations = allNegotiations.filter((n: ContractNegotiation) => {
+            const counterPartyId = n.counterPartyId;
+            if (counterPartyId) {
+              const counterPartyParticipantId = counterPartyId.split("/").pop();
+              if (counterPartyParticipantId?.startsWith(participantId)) {
+                return true;
+              }
+            }
+            // Also include negotiations that have agreements where participant is consumer or provider
+            return negotiationIdsWithParticipant.includes(n["@id"]);
+          });
+
+          // Load agreements for filtered negotiations for display
+          await Promise.all(
+            this.negotiations.map(async (n: ExtendedContractNegotiation) => {
+              if (n.contractAgreementId) {
+                n.agreement = await this.dspConnector?.instance?.loadAgreement(
+                  n["@id"],
+                );
+              }
+            }),
+          );
+
+          // Split negotiations by provider/consumer role based on agreement
+          this.providerNegotiations = this.negotiations.filter(
+            (n: ExtendedContractNegotiation) => {
+              if (!n.agreement) return false;
+              if (!n.agreement.providerId) return false;
+              const providerParticipantId = n.agreement.providerId.split("/").pop();
+              return providerParticipantId?.startsWith(participantId);
+            },
+          );
+
+          this.consumerNegotiations = this.negotiations.filter(
+            (n: ExtendedContractNegotiation) => {
+              if (!n.agreement) return false;
+              if (!n.agreement.consumerId) return false;
+              const consumerParticipantId = n.agreement.consumerId.split("/").pop();
+              return consumerParticipantId?.startsWith(participantId);
+            },
+          );
+        }
       } else {
         console.warn(
           "DSP Connector not found. Please ensure the DSP Connector is properly initialized.",
@@ -57,7 +251,7 @@ export class Ds4goCustomerModal extends OrbitComponent {
 
   render() {
     return this._getResource.render({
-      pending: () => nothing,
+      pending: () => html`<solid-loader></solid-loader>`,
       complete: (obj?: Resource) => {
         if (!obj) {
           this._closeModal();
@@ -80,34 +274,86 @@ export class Ds4goCustomerModal extends OrbitComponent {
                 >
                 <tems-division type="body-m"
                   ><div>
-                    ${
-                      obj.participant_id
-                        ? msg(
-                            str`Participant ID: ${String(obj.participant_id)}`,
-                          )
-                        : ""
-                    }
+                    ${obj.participant_id
+                      ? msg(str`Participant ID: ${String(obj.participant_id)}`)
+                      : ""}
                   </div></tems-division
                 >
-                ${
-                  obj.signed_contracts
-                    ? html`<tems-division type="h4"
-                        ><div>
-                          ${msg("Contracts signed with the customer")}
-                        </div></tems-division
+                ${obj.balance !== undefined && obj.balance !== null
+                  ? html`<tems-division type="body-m"
+                      ><div>
+                        ${msg(str`Balance: ${String(obj.balance)}`)}
+                      </div></tems-division
+                    >`
+                  : nothing}
+                ${this.providerNegotiations && this.providerNegotiations.length > 0
+                  ? html`<tems-division type="h4"
+                        ><div>${msg("Provider Negotiations")}</div></tems-division
                       >
                       <div class="card-grid card-grid-vertical">
-                        ${obj.signed_contracts?.map((contract: Resource) => {
-                          return html`<ds4go-card-catalog
-                            .object=${import.meta.env.DEV ? contract : nothing}
-                            .header=${contract.name || nothing}
-                            .content=${contract.description || nothing}
-                            date=${contract.updated_at || nothing}
-                          ></ds4go-card-catalog>`;
-                        })}
+                        ${this.providerNegotiations.map(
+                          (negotiation: ExtendedContractNegotiation) =>
+                            html`<ds4go-card-catalog
+                              .object=${import.meta.env.DEV
+                                ? negotiation
+                                : nothing}
+                              .header=${negotiation["@id"].split("/").pop()}
+                              .content=${negotiation.agreement
+                                ? `Agreement: ${negotiation.agreement["@id"]
+                                    .split("/")
+                                    .pop()}`
+                                : msg("No agreement")}
+                              .tags=${this._getNegotiationTags(negotiation)}
+                              date=${negotiation.createdAt
+                                ? new Date(
+                                    negotiation.createdAt,
+                                  ).toLocaleString()
+                                : nothing}
+                            ></ds4go-card-catalog>`,
+                        )}
                       </div>`
-                    : nothing
-                }
+                  : nothing}
+                ${this.consumerNegotiations && this.consumerNegotiations.length > 0
+                  ? html`<tems-division type="h4"
+                        ><div>${msg("Customer Negotiations")}</div></tems-division
+                      >
+                      <div class="card-grid card-grid-vertical">
+                        ${this.consumerNegotiations.map(
+                          (negotiation: ExtendedContractNegotiation) =>
+                            html`<ds4go-card-catalog
+                              .object=${import.meta.env.DEV
+                                ? negotiation
+                                : nothing}
+                              .header=${negotiation["@id"].split("/").pop()}
+                              .content=${negotiation.agreement
+                                ? `Agreement: ${negotiation.agreement["@id"]
+                                    .split("/")
+                                    .pop()}`
+                                : msg("No agreement")}
+                              .tags=${this._getNegotiationTags(negotiation)}
+                              date=${negotiation.createdAt
+                                ? new Date(
+                                    negotiation.createdAt,
+                                  ).toLocaleString()
+                                : nothing}
+                            ></ds4go-card-catalog>`,
+                        )}
+                      </div>`
+                  : nothing}
+                ${this.consumerAgreements && this.consumerAgreements.length > 0
+                  ? html`<tems-division type="h4"
+                        ><div>${msg("Customer Agreements")}</div></tems-division
+                      >
+                      ${this.consumerAgreements.map(
+                        (agreement: ContractAgreement) =>
+                          html`<ds4go-customer-contract-modal-part
+                            .agreement=${agreement}
+                            .assets=${this.assets}
+                            .bundles=${this.bundles}
+                            .policies=${this.policies}
+                          ></ds4go-customer-contract-modal-part>`,
+                      )}`
+                  : nothing}
                 <tems-division type="body-sm"
                   ><div>
                     <div>

package/src/components/solid-customer-list.ts

@@ -49,7 +49,15 @@ export class SolidCustomerList extends OrbitComponent {
     { key: "updated_at", value: "updated_at", cast: formatDate },
     { key: "name", value: "name" },
     { key: "participant_id", value: "participant_id" },
-    { key: "balance", value: "balance" },
+    {
+      key: "balance",
+      value: "balance",
+      cast: (balance: string) =>
+        new Intl.NumberFormat(undefined, {
+          style: "currency",
+          currency: "EUR",
+        }).format(Number(balance)),
+    },
   ];
 
   async _afterAttach() {