@startinblox/components-ds4go 3.1.2 → 3.1.4

package/dist/index.js

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

package/package.json

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

package/src/component.d.ts

@@ -87,14 +87,20 @@ export interface LiveOrbit extends Orbit {
   getRoute: (
     type: string,
     returnFirst?: boolean,
-    ignoreError?: boolean
+    ignoreError?: boolean,
   ) => string | false;
   Swal: any;
   defaultRoute: string;
 }
 
 export type Context = Record<string, string | { "@id": string }>;
-export type Permission = "add" | "delete" | "change" | "control" | "view" | string;
+export type Permission =
+  | "add"
+  | "delete"
+  | "change"
+  | "control"
+  | "view"
+  | string;
 export type DateTime = string;
 
 export interface LimitedResource {
@@ -231,38 +237,81 @@ export interface PolicyDefinitionInput {
   "@type"?: string;
   "@id": string;
   policy: OdrlPolicy;
-}interface AssetSelector {
-	"@type": "CriterionDto";
-	operandLeft: string;
-	operator: string;
-	operandRight: any;
+}
+
+interface AssetSelector {
+  "@type": "CriterionDto";
+  operandLeft: string;
+  operator: string;
+  operandRight: any;
+}
+
+export type NegotiationState =
+  | "REQUESTING"
+  | "REQUESTED"
+  | "OFFERING"
+  | "OFFERED"
+  | "ACCEPTING"
+  | "ACCEPTED"
+  | "AGREEING"
+  | "AGREED"
+  | "VERIFYING"
+  | "VERIFIED"
+  | "FINALIZING"
+  | "FINALIZED"
+  | "TERMINATING"
+  | "TERMINATED";
+
+export type NegotiationType = "CONSUMER" | "PROVIDER";
+
+export interface ContractNegotiation {
+  "@id": string;
+  "@type"?: string;
+  state: NegotiationState;
+  counterPartyId?: string;
+  counterPartyAddress?: string;
+  contractAgreementId?: string;
+  assetId?: string;
+  errorDetail?: string;
+  createdAt?: number;
+  type?: NegotiationType;
+}
+
+export interface ContractAgreement {
+  "@type": "ContractAgreement";
+  "@id": string;
+  assetId: string;
+  policy?: any;
+  contractSigningDate?: number;
+  consumerId?: string;
+  providerId?: string;
 }
 
 export interface ContractDefinition {
-	"@type": "ContractDefinition";
-	"@id": string;
-	"@context"?: any;
-	accessPolicyId: string;
-	contractPolicyId: string;
-	assetsSelector?: AssetSelector[] | AssetSelector;
-	createdAt?: number;
+  "@type": "ContractDefinition";
+  "@id": string;
+  "@context"?: any;
+  accessPolicyId: string;
+  contractPolicyId: string;
+  assetsSelector?: AssetSelector[] | AssetSelector;
+  createdAt?: number;
 }
 
 export interface ContractDefinitionInput {
-	"@id": string;
-	accessPolicyId: string;
-	contractPolicyId: string;
-	assetsSelector?: AssetSelector[];
+  "@id": string;
+  accessPolicyId: string;
+  contractPolicyId: string;
+  assetsSelector?: AssetSelector[];
 }
 
 export interface PolicyDefinition {
-	"@id": string;
-	policy?: OdrlPolicy;
+  "@id": string;
+  policy?: OdrlPolicy;
 }
 
 export interface Asset {
-	"@id": string;
-	properties?: Record<string, any>;
+  "@id": string;
+  properties?: Record<string, any>;
 }
 
 export declare global {

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>`;
+  }
+}