feat: 2076 additional data

common/src/hedera-modules/vcjs/vcjs.ts

@@ -80,6 +80,14 @@ export interface IDocumentOptions {
      * UUID
      */
     uuid?: string;
+    /**
+     * Evidence entries to embed in the VC before signing
+     */
+    evidence?: { type: string[]; dataType: string; data: string }[];
+    /**
+     * JSON-LD context URL for evidence entries
+     */
+    evidenceContext?: string;
 }
 
 /**
@@ -680,6 +688,14 @@ export class VCJS {
         } else {
             vc.setIssuer(new Issuer(didDocument.getDid()));
         }
+        if (documentOptions?.evidenceContext) {
+            vc.addContext(documentOptions.evidenceContext);
+        }
+        if (documentOptions?.evidence?.length) {
+            for (const entry of documentOptions.evidence) {
+                vc.addEvidence(entry);
+            }
+        }
         return await this.issueVerifiableCredential(vc, didDocument, signatureType, documentOptions);
     }
 

frontend/src/app/modules/common/policy-comments/_toolbar-files.scss

@@ -0,0 +1,100 @@
+.toolbar-files {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 6px;
+
+    .toolbar-file {
+        height: 32px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border: 1px solid var(--primary-primary, #4169E2);
+        background: #f0f3fc;
+        border-radius: 6px;
+        font-family: Inter, sans-serif;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 14px;
+        vertical-align: middle;
+        overflow: hidden;
+
+        .toolbar-file-icon {
+            height: 30px;
+            width: 30px;
+            min-width: 30px;
+            padding: 7px;
+            overflow: hidden;
+        }
+
+        .toolbar-file-loading,
+        .guardian-loading {
+            position: relative !important;
+            width: 30px !important;
+            height: 30px !important;
+            padding: 6px !important;
+            background: transparent !important;
+
+            .guardian-loading-image {
+                width: 20px !important;
+                height: 20px !important;
+            }
+        }
+
+        .toolbar-file-metadata {
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            .file-name {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                height: 30px;
+                line-height: 30px;
+            }
+        }
+
+        .toolbar-file-name {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding: 0 8px;
+            line-height: 30px;
+        }
+
+        .toolbar-file-action {
+            height: 30px;
+            width: 30px;
+            min-width: 30px;
+            padding: 7px;
+            background: #f0f3fc;
+            cursor: pointer;
+
+            &:hover {
+                background: #dce0ea;
+            }
+        }
+    }
+
+    .toolbar-file-more {
+        border: 1px solid var(--primary-primary, #4169E2);
+        height: 32px;
+        width: 32px;
+        border-radius: 8px;
+        font-family: Inter, sans-serif;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 14px;
+        vertical-align: middle;
+        color: var(--primary-primary, #4169E2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        user-select: none;
+    }
+}

frontend/src/app/modules/policy-engine/policy-configuration/blocks/documents/request-addon-config/request-addon-config.component.html

@@ -83,7 +83,25 @@
 
     <tr class="propRow">
         <td class="propRowCol multi-line"></td>
-        <td class="propRowCell multi-line cellName" 
+        <td class="propRowCell multi-line cellName"
+            pTooltip="Enable additional data (evidence) step"
+            tooltipPosition="bottom"
+            [tooltipOptions]="{ showDelay: 500 }"
+            tooltipStyleClass="guardian-tooltip small-guardian-tooltip"
+        >Enable additional data</td>
+        <td class="propRowCell multi-line">
+            <input
+                class="prop-input"
+                type="checkbox"
+                [(ngModel)]="properties.enableAdditionalData"
+                [readonly]="readonly"
+                (change)="onSave()">
+        </td>
+    </tr>
+
+    <tr class="propRow">
+        <td class="propRowCol multi-line"></td>
+        <td class="propRowCell multi-line cellName"
             pTooltip="Force User Account for block Hedera operations"
             tooltipPosition="bottom"
             [tooltipOptions]="{ showDelay: 500 }"

frontend/src/app/modules/policy-engine/policy-configuration/blocks/documents/request-config/request-config.component.html

@@ -65,7 +65,25 @@
 
     <tr class="propRow">
         <td class="propRowCol multi-line"></td>
-        <td class="propRowCell multi-line cellName" 
+        <td class="propRowCell multi-line cellName"
+            pTooltip="Enable additional data (evidence) step in the request wizard"
+            tooltipPosition="bottom"
+            [tooltipOptions]="{ showDelay: 500 }"
+            tooltipStyleClass="guardian-tooltip small-guardian-tooltip"
+        >Enable additional data</td>
+        <td class="propRowCell multi-line">
+            <input
+                class="prop-input"
+                type="checkbox"
+                [(ngModel)]="properties.enableAdditionalData"
+                [readonly]="readonly"
+                (change)="onSave()">
+        </td>
+    </tr>
+
+    <tr class="propRow">
+        <td class="propRowCol multi-line"></td>
+        <td class="propRowCell multi-line cellName"
             pTooltip="Force User Account for block Hedera operations"
             tooltipPosition="bottom"
             [tooltipOptions]="{ showDelay: 500 }"

frontend/src/app/modules/policy-engine/policy-configuration/blocks/documents/request-config/request-config.component.ts

@@ -77,6 +77,9 @@ export class RequestConfigComponent implements OnInit {
         this.properties.uiMetaData = this.properties.uiMetaData || {};
         this.properties.uiMetaData.type = this.properties.uiMetaData.type || 'page';
         this.properties.presetFields = this.properties.presetFields || [];
+        if (this.properties.enableAdditionalData === undefined) {
+            this.properties.enableAdditionalData = false;
+        }
 
         this.schemas = this.moduleVariables?.schemas || [];
 

frontend/src/app/modules/policy-engine/policy-viewer/blocks/request-document-block-addon/request-document-block-addon.component.ts

@@ -25,6 +25,7 @@ interface IRequestDocumentAddonData {
     schema: ISchema;
     active: boolean;
     relayerAccount: boolean;
+    enableAdditionalData: boolean;
     data: any;
     buttonName: string;
     hideWhenDiscontinued?: boolean;
@@ -79,6 +80,7 @@ export class RequestDocumentBlockAddonComponent
     public edit: boolean;
     public draft: boolean;
     public relayerAccount: boolean;
+    public enableAdditionalData: boolean = false;
     public isLocalUser: boolean = true;
 
     constructor(
@@ -132,6 +134,7 @@ export class RequestDocumentBlockAddonComponent
             this.disabled = active === false;
             this.isExist = true;
             this.relayerAccount = !!data.relayerAccount && !this.dryRun;
+            this.enableAdditionalData = !!data.enableAdditionalData && !this.dryRun;
             this.needPreset = data.preset;
             this.presetFields = data.presetFields || [];
             this.restoreData = data.restoreData;

frontend/src/app/modules/policy-engine/policy-viewer/blocks/request-document-block/dialog/request-document-block-dialog.component.html

@@ -50,23 +50,27 @@
                 <div class="guardian-button-label">Test</div>
             </button>
         </div>
-        <div *ngIf="relayerAccount" class="relayer-account-steps">
+        <div *ngIf="relayerAccount || enableAdditionalData" class="relayer-account-steps">
             <div class="guardian-step-container">
                 <div class="guardian-stepper horizontal-stepper">
                     <div class="guardian-step" [attr.action]="isActionStep(0)" [attr.disabled]="isStep(0)" (click)="setStep(0)">
                         <div class="guardian-step-marker">1</div>
                         <div class="guardian-step-name">Fill Form</div>
                     </div>
-                    <div class="guardian-step-separator"></div>
-                    <div class="guardian-step" [attr.action]="isActionStep(1)" [attr.disabled]="!isStep(2)" (click)="setStep(1)">
-                        <div class="guardian-step-marker">2</div>
-                        <div class="guardian-step-name">Configure Relayer Account</div>
-                    </div>
-                    <!-- <div class="guardian-step-separator"></div>
-                    <div class="guardian-step" [attr.action]="isActionStep(2)" [attr.disabled]="true">
-                        <div class="guardian-step-marker">3</div>
-                        <div class="guardian-step-name">Validation Results</div>
-                    </div> -->
+                    <ng-container *ngIf="enableAdditionalData">
+                        <div class="guardian-step-separator"></div>
+                        <div class="guardian-step" [attr.action]="isActionStep(1)" [attr.disabled]="!isStep(1) && !isStep(2)" (click)="isStep(2) && setStep(1)">
+                            <div class="guardian-step-marker">2</div>
+                            <div class="guardian-step-name">Add Evidence Attachments</div>
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="relayerAccount">
+                        <div class="guardian-step-separator"></div>
+                        <div class="guardian-step" [attr.action]="isActionStep(enableAdditionalData ? 2 : 1)" [attr.disabled]="!isStep(enableAdditionalData ? 3 : 2)" (click)="isStep(enableAdditionalData ? 3 : 2) && setStep(enableAdditionalData ? 2 : 1)">
+                            <div class="guardian-step-marker">{{enableAdditionalData ? 3 : 2}}</div>
+                            <div class="guardian-step-name">Configure Relayer Account</div>
+                        </div>
+                    </ng-container>
                 </div>
             </div>
         </div>
@@ -100,7 +104,32 @@
                     </app-schema-form-root>
                 </div>
             </form>
-            <div class="relayer-account-container" [attr.visibility]="isStep(1)">
+            <div class="evidence-container" [attr.visibility]="isStep(evidenceStepIndex)" *ngIf="enableAdditionalData">
+                <div class="toolbar-textarea guardian-textarea-container">
+                    <textarea
+                        placeholder="Add a comment (optional)"
+                        rows="3"
+                        [(ngModel)]="evidenceText"
+                        [maxlength]="600">
+                    </textarea>
+                </div>
+                <div class="toolbar-files">
+                    <div *ngFor="let file of evidenceFiles" class="toolbar-file">
+                        <div *ngIf="!file.loaded && !file.error" class="toolbar-file-loading guardian-loading"></div>
+                        <div *ngIf="file.loaded || file.error" class="toolbar-file-name">{{ file.name }}</div>
+                        <div class="toolbar-file-action" (click)="onDeleteEvidenceFile(file)">
+                            <svg-icon
+                                class="svg-icon-16"
+                                src="/assets/images/icons/16/close.svg"
+                                svgClass="icon-color-close"></svg-icon>
+                        </div>
+                    </div>
+                </div>
+                <div class="toolbar-actions" (drop)="onEvidenceDrop($event)" (dragover)="$event.preventDefault()">
+                    <button pButton class="guardian-button guardian-button-secondary" (click)="onEvidenceAttach($event)">Attach</button>
+                </div>
+            </div>
+            <div class="relayer-account-container" [attr.visibility]="isStep(enableAdditionalData ? 2 : 1)">
                 <div class="relayer-account-type-values">
                     <div *ngIf="needRemoteWarning" class="account-warning">
                         <svg-icon
@@ -200,7 +229,7 @@
 
                 </div>
             </div>
-            <div class="result-container" [attr.visibility]="isStep(2)"></div>
+            <div class="result-container" [attr.visibility]="isStep(enableAdditionalData && relayerAccount ? 3 : 2)"></div>
             <ng-template #preloader>
                 <div class="preloader-image"></div>
             </ng-template>

frontend/src/app/modules/policy-engine/policy-viewer/blocks/request-document-block/dialog/request-document-block-dialog.component.scss

@@ -290,6 +290,24 @@ form {
     padding: 1px 16px;
 }
 
+.evidence-container {
+    @import '../../../../../common/policy-comments/toolbar-files';
+
+    .toolbar-files {
+        margin-top: 12px;
+        flex-direction: column;
+
+        .toolbar-file {
+            display: flex;
+            width: 100%;
+        }
+    }
+
+    .toolbar-actions {
+        margin-top: 8px;
+    }
+}
+
 .account-warning {
     display: flex;
     flex-direction: column;