@startinblox/components-ds4go 3.1.2 → 3.1.4

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/modal/ds4go-fact-bundle-modal.ts

@@ -1,82 +1,221 @@
-import { ComponentObjectHandler } from "@helpers";
+import { OrbitComponent } from "@helpers";
 import { localized, msg } from "@lit/localize";
-import type { Resource } from "@src/component";
+import { Task } from "@lit/task";
+import type {
+  Asset,
+  ContractAgreement,
+  ContractDefinition,
+  ContractNegotiation,
+  OrbitComponent as OrbitComponentConfig,
+  PolicyDefinition,
+  Resource,
+} from "@src/component";
 
 import ModalStyle from "@styles/modal/ds4go-fact-bundle-modal.scss?inline";
 import { css, html, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
+
+type ExtendedContractNegotiation = ContractNegotiation & {
+  agreement?: ContractAgreement;
+};
 
 @customElement("ds4go-fact-bundle-modal")
 @localized()
-export class Ds4goFactBundleModal extends ComponentObjectHandler {
+export class Ds4goFactBundleModal extends OrbitComponent {
+  constructor() {
+    super({ setupSubscriptions: false, ignoreRouter: true });
+  }
+
   static styles = css`
     ${unsafeCSS(ModalStyle)}
   `;
 
-  @property({ attribute: false, type: Object })
-  object: Resource = { "@id": "" };
+  @state()
+  dspConnector: OrbitComponentConfig | undefined;
+
+  async _afterAttach() {
+    // use this.dspConnector.instance to reach the connector
+    this.dspConnector = this.orbit?.components.find(
+      (c) => c.type === "dsp-connector",
+    );
+
+    return Promise.resolve();
+  }
 
   _closeModal() {
     this.dispatchEvent(new CustomEvent("close"));
   }
 
+  @state()
+  assets: Asset[] = [];
+
+  @state()
+  policies: PolicyDefinition[] = [];
+
+  @state()
+  contracts: ContractDefinition[] = [];
+
+  @state()
+  negotiations: ExtendedContractNegotiation[] = [];
+
+  _getResource = new Task(this, {
+    task: async () => {
+      if (!this.object) return;
+
+      if (this.dspConnector?.instance) {
+        this.assets = this.dspConnector.instance.assets.filter(
+          (a: Asset) =>
+            a.dataAddress?.baseUrl ===
+            "https://api.stg.ds4go.startinblox.com/factbundles/21/",
+        );
+
+        this.contracts = this.dspConnector.instance.contracts.filter(
+          (c: ContractDefinition) =>
+            (this.assets || []).find((a: Asset) => {
+              if (!c.assetsSelector) {
+                return false;
+              }
+              if (Array.isArray(c.assetsSelector)) {
+                return c.assetsSelector.find(
+                  (s) => s.operandRight === a["@id"],
+                );
+              }
+              return c.assetsSelector.operandRight === a["@id"];
+            }),
+        );
+
+        this.policies = [
+          ...(this.contracts || []).flatMap((c: ContractDefinition) => {
+            if (!c.accessPolicyId && !c.contractPolicyId) return [];
+            return this.dspConnector?.instance?.policies.filter(
+              (p: PolicyDefinition) =>
+                p["@id"] === c.accessPolicyId ||
+                p["@id"] === c.contractPolicyId,
+            );
+          }),
+        ];
+
+        this.negotiations = this.dspConnector.instance.negotiations.filter(
+          (c: ContractNegotiation) => {
+            if (!c.assetId) return false;
+            return this.assets.find((a: Asset) => a["@id"] === c.assetId);
+          },
+        );
+
+        this.negotiations.forEach((n: ExtendedContractNegotiation) => {
+          if (n.contractAgreementId) {
+            n.agreement = this.dspConnector?.instance?.loadAgreement(n["@id"]);
+          }
+        });
+      } else {
+        console.warn(
+          "DSP Connector not found. Please ensure the DSP Connector is properly initialized.",
+        );
+      }
+
+      return this.object;
+    },
+    args: () => [this.caching, this.currentRoute],
+  });
+
   render() {
-    return html`<div class="modal">
-      <div class="topbar">
-        <tems-button
-          @click=${this._closeModal}
-          type="outline-gray"
-          .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
-        ></tems-button>
-      </div>
-      <div class="modal-content-wrapper">
-        <div class="modal-box">
-          <div class="modal-content">
-            <tems-division type="h3"
-              ><div>${String(this.object.name || "")}</div></tems-division
-            >
-            <tems-division type="body-m"
-              ><div>${String(this.object.description || "")}</div></tems-division
-            >
-            <tems-division type="h4"
-              ><div>${msg("All facts in this bundle")}</div></tems-division
-            >
-            <div class="card-grid card-grid-vertical">
-              ${this.object.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>
-            <tems-division type="body-sm"
-              ><div>
-                <div>
-                  ${msg("Bundle created on")} ${String(this.object.created_at)}
-                </div>
-                <div>
-                  ${msg("Bundle updated on")} ${String(this.object.updated_at)}
+    return this._getResource.render({
+      pending: () => html`<solid-loader></solid-loader>`,
+      complete: (obj?: Resource) => {
+        if (!obj) {
+          this._closeModal();
+          return nothing;
+        }
+
+        return html`<div class="modal">
+          <div class="topbar">
+            <tems-button
+              @click=${this._closeModal}
+              type="outline-gray"
+              .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
+            ></tems-button>
+          </div>
+          <div class="modal-content-wrapper">
+            <div class="modal-box">
+              <div class="modal-content">
+                <tems-division type="h3"
+                  ><div>${String(obj.name || "")}</div></tems-division
+                >
+                <tems-division type="body-m"
+                  ><div>${String(obj.description || "")}</div></tems-division
+                >
+                <tems-division type="h4"
+                  ><div>${msg("All facts in this bundle")}</div></tems-division
+                >
+                <div class="card-grid card-grid-vertical">
+                  ${obj.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></tems-division
-            >
+                <tems-division type="body-sm"
+                  ><div>
+                    <div>
+                      ${msg("Bundle created on")} ${String(obj.created_at)}
+                    </div>
+                    <div>
+                      ${msg("Bundle updated on")} ${String(obj.updated_at)}
+                    </div>
+                  </div></tems-division
+                >
+                <tems-division type="h4"
+                  ><div>${msg("Technical informations")}</div></tems-division
+                >
+                ${this.contracts && this.contracts.length > 0
+                  ? html`${this.contracts.map(
+                      (contract: ContractDefinition) =>
+                        html`<ds4go-contract-modal-part
+                          .contract=${contract}
+                          .assets=${this.assets}
+                          .policies=${this.policies}
+                        ></ds4go-contract-modal-part>`,
+                    )}`
+                  : nothing}
+                ${this.negotiations && this.negotiations.length > 0
+                  ? html`<ds4go-negotiations-modal-part
+                        .negotiations=${this.negotiations}
+                        .assets=${this.assets}
+                        .type=${"PROVIDER"}
+                      ></ds4go-negotiations-modal-part>
+                      <ds4go-negotiations-modal-part
+                        .negotiations=${this.negotiations}
+                        .assets=${this.assets}
+                        .type=${"CONSUMER"}
+                      ></ds4go-negotiations-modal-part>`
+                  : nothing}
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    </div>`;
+        </div>`;
+      },
+      error: (e) => {
+        if (import.meta.env.DEV) {
+          console.error(e, this);
+        }
+        return nothing;
+      },
+    });
   }
 }