@startinblox/components-ds4go 3.3.8 → 4.0.0

package/src/components/modal/catalog-modal/agreement-info.ts

@@ -0,0 +1,110 @@
+import { localized, msg } from "@lit/localize";
+import { html, nothing, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { LitElement } from "lit";
+import type { DSPOffer, AgreementInfo } from "@src/ds4go";
+
+/**
+ * Agreement info component for displaying contract agreement details
+ */
+@customElement("catalog-modal-agreement-info")
+@localized()
+export class CatalogModalAgreementInfo extends LitElement {
+  @property({ attribute: false })
+  offer?: DSPOffer;
+
+  @property({ attribute: false })
+  agreementInfo?: AgreementInfo;
+
+  @property({ attribute: false })
+  contractId?: string;
+
+  private _handleRenewContract(): void {
+    this.dispatchEvent(
+      new CustomEvent("renew-contract", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render(): TemplateResult | typeof nothing {
+    // Only show if we have agreement info
+    if (!this.contractId || !this.agreementInfo) {
+      return nothing;
+    }
+
+    const agreementDate = this.agreementInfo.timestamp
+      ? new Date(this.agreementInfo.timestamp).toLocaleString()
+      : null;
+
+    // Get endpoint URL from asset
+    const endpointUrl = this.offer?.["dcat:endpointUrl"];
+
+    return html`<div
+      style="margin-top: 24px; padding: 16px; background: #e8f5e9; border-radius: 8px;"
+    >
+      <tems-division type="h4"
+        ><div>${msg("Contract Agreement")}</div></tems-division
+      >
+      <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>
+
+      ${this.agreementInfo
+        ? html`
+            <div
+              style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1);"
+            >
+              <button
+                @click=${this._handleRenewContract}
+                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>`;
+  }
+}

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

@@ -0,0 +1,4 @@
+export { CatalogModalPolicySelection } from "./policy-selection";
+export { CatalogModalPolicyDisplay } from "./policy-display";
+export { CatalogModalAgreementInfo } from "./agreement-info";
+export { CatalogModalNegotiationButton } from "./negotiation-button";

package/src/components/modal/catalog-modal/negotiation-button.ts

@@ -0,0 +1,111 @@
+import { localized, msg } from "@lit/localize";
+import { html, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { LitElement } from "lit";
+
+/**
+ * Negotiation button component for handling DSP contract negotiation UI
+ */
+@customElement("catalog-modal-negotiation-button")
+@localized()
+export class CatalogModalNegotiationButton extends LitElement {
+  @property({ attribute: false })
+  dspStore?: any;
+
+  @property({ attribute: false })
+  showPolicySelection = false;
+
+  @property()
+  negotiationStatus:
+    | "idle"
+    | "negotiating"
+    | "pending"
+    | "granted"
+    | "failed"
+    | "transferring" = "idle";
+
+  @property()
+  currentState?: string;
+
+  @property()
+  attempt?: number;
+
+  @property()
+  maxAttempts?: number;
+
+  @property()
+  negotiationError?: string;
+
+  private _handleNegotiate(): void {
+    this.dispatchEvent(
+      new CustomEvent("negotiate", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleRetry(): void {
+    this.dispatchEvent(
+      new CustomEvent("retry", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render(): TemplateResult {
+    const hasDspConnector =
+      this.dspStore !== undefined && this.dspStore !== null;
+
+    if (!hasDspConnector) {
+      return html`<tems-button disabled=""
+        >${msg("Activate this service")}</tems-button
+      >`;
+    }
+
+    switch (this.negotiationStatus) {
+      case "idle":
+        return html`<tems-button @click=${this._handleNegotiate}
+          >${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._handleRetry} type="outline-gray">
+            ${msg("Retry")}
+          </tems-button>
+        </div>`;
+
+      default:
+        return html`<tems-button disabled=""
+          >${msg("Activate this service")}</tems-button
+        >`;
+    }
+  }
+}

package/src/components/modal/catalog-modal/policy-display.ts

@@ -0,0 +1,66 @@
+import { localized, msg } from "@lit/localize";
+import { html, nothing, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { LitElement } from "lit";
+import { hasMultiplePolicies } from "@helpers/dsp/policyHelpers";
+import type { ODRLPolicy } from "@src/ds4go";
+
+/**
+ * Policy display component for showing access policy information
+ */
+@customElement("catalog-modal-policy-display")
+@localized()
+export class CatalogModalPolicyDisplay extends LitElement {
+  @property({ attribute: false })
+  policy?: ODRLPolicy;
+
+  @property({ attribute: false })
+  policies?: ODRLPolicy[];
+
+  render(): TemplateResult | typeof nothing {
+    const hasMultiple = hasMultiplePolicies(this.policies || []);
+    const policies = this.policies || [];
+
+    // Only show if there's a policy
+    if (!this.policy && (!this.policies || this.policies.length === 0)) {
+      return nothing;
+    }
+
+    return html`<div
+      style="margin-top: 24px; padding: 16px; background: #f0f7ff; border-radius: 8px; border: 1px solid #d0e7ff;"
+    >
+      ${hasMultiple
+        ? html`<tems-division type="h4"
+              ><div>${msg("Access Policies")}</div></tems-division
+            >
+            <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: ODRLPolicy, 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`<tems-division type="h4"
+              ><div>${msg("Access Policy")}</div></tems-division
+            >
+            <odrl-policy-viewer .policy=${this.policy}></odrl-policy-viewer>`}
+    </div>`;
+  }
+}

package/src/components/modal/catalog-modal/policy-selection.ts

@@ -0,0 +1,71 @@
+import { localized, msg } from "@lit/localize";
+import { html, nothing, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { LitElement } from "lit";
+import { formatPolicyDetails } from "@helpers/dsp/policyHelpers";
+import type { ODRLPolicy } from "@src/ds4go";
+
+/**
+ * Policy selection component for choosing from multiple available policies
+ */
+@customElement("catalog-modal-policy-selection")
+@localized()
+export class CatalogModalPolicySelection extends LitElement {
+  @property({ attribute: false })
+  policies: ODRLPolicy[] = [];
+
+  private _handlePolicySelect(index: number): void {
+    this.dispatchEvent(
+      new CustomEvent("policy-selected", {
+        detail: { index },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleCancel(): void {
+    this.dispatchEvent(
+      new CustomEvent("policy-cancel", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render(): TemplateResult {
+    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">
+        ${this.policies.map(
+          (policy: ODRLPolicy, index: number) =>
+            html`<div
+              class="policy-option"
+              @click=${() => this._handlePolicySelect(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">
+                ${formatPolicyDetails(policy)}
+              </div>
+            </div>`,
+        )}
+      </div>
+      <div class="policy-selection-actions">
+        <tems-button type="outline-gray" @click=${this._handleCancel}>
+          ${msg("Cancel")}
+        </tems-button>
+      </div>
+    </div>`;
+  }
+}