diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ad997405..3f0ee1327 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,8 @@ the detailed section referring to by linking pull requests or issues. #### Patch +- Added Initiate Transfer Confirm ToS Dialog + #### Deployment Migration Notes ## [v3.2.2] - 2024-04-20 diff --git a/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.module.ts b/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.module.ts new file mode 100644 index 000000000..d94787fe1 --- /dev/null +++ b/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.module.ts @@ -0,0 +1,33 @@ +import {ClipboardModule} from '@angular/cdk/clipboard'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatIconModule} from '@angular/material/icon'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {PipesAndDirectivesModule} from '../pipes-and-directives/pipes-and-directives.module'; +import {InitiateTransferConfirmTosDialogComponent} from './initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component'; + +@NgModule({ + imports: [ + // Angular + CommonModule, + + // Angular CDK + ClipboardModule, + + // Angular Material + MatButtonModule, + MatCheckboxModule, + MatDialogModule, + MatIconModule, + MatTooltipModule, + + // EDC UI Feature Modules + PipesAndDirectivesModule, + ], + declarations: [InitiateTransferConfirmTosDialogComponent], + exports: [InitiateTransferConfirmTosDialogComponent], +}) +export class InitiateTransferConfirmTosDialogModule {} diff --git a/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.html b/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.html new file mode 100644 index 000000000..0011f6950 --- /dev/null +++ b/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.html @@ -0,0 +1,26 @@ +

EULA/TOS Confirmation

+ +
+

+ Hereby I agree that by pressing the 'Confirm' button, I legally accept the + license terms, policies, and additional conditions for use, including any + copyright notices, associated with the provider's offer. +

+
+ +
+ + I agree to the EULA/TOS + + +
+ + +
+
diff --git a/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.scss b/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.ts b/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.ts new file mode 100644 index 000000000..4a19849bf --- /dev/null +++ b/src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component.ts @@ -0,0 +1,32 @@ +import {Component, OnInit} from '@angular/core'; +import {MatCheckboxChange} from '@angular/material/checkbox'; +import {MatDialogRef} from '@angular/material/dialog'; + +@Component({ + selector: 'app-initiate-transfer-confirm-tos-dialog', + templateUrl: './initiate-transfer-confirm-tos-dialog.component.html', + styleUrls: ['./initiate-transfer-confirm-tos-dialog.component.scss'], +}) +export class InitiateTransferConfirmTosDialogComponent implements OnInit { + checkboxChecked = false; + + constructor( + public dialogRef: MatDialogRef, + ) {} + + ngOnInit(): void {} + + public onCheckboxChange($event: MatCheckboxChange) { + this.checkboxChecked = $event.checked; + } + + onCancel() { + this.dialogRef.close(false); + } + + onConfirm() { + if (this.checkboxChecked) { + this.dialogRef.close(true); + } + } +} diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page.module.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page.module.ts index 882f3af69..ab193b748 100644 --- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page.module.ts +++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page.module.ts @@ -21,6 +21,7 @@ import {MatTooltipModule} from '@angular/material/tooltip'; import {RouterModule} from '@angular/router'; import {NgChartsModule} from 'ng2-charts'; import {NgxJsonViewerModule} from 'ngx-json-viewer'; +import {InitiateTransferConfirmTosDialogModule} from 'src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.module'; import {CatalogModule} from '../../../component-library/catalog/catalog.module'; import {DataAddressModule} from '../../../component-library/data-address/data-address.module'; import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module'; @@ -63,6 +64,7 @@ import {ContractAgreementTransferDialogComponent} from './contract-agreement-tra // EDC UI Modules CatalogModule, DataAddressModule, + InitiateTransferConfirmTosDialogModule, PipesAndDirectivesModule, UiElementsModule, ], diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts index a5a4afe7d..b8c5070c3 100644 --- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts +++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts @@ -1,5 +1,9 @@ import {Component, Inject, OnDestroy} from '@angular/core'; -import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; +import { + MAT_DIALOG_DATA, + MatDialog, + MatDialogRef, +} from '@angular/material/dialog'; import {Observable, Subject} from 'rxjs'; import {finalize} from 'rxjs/operators'; import { @@ -7,6 +11,7 @@ import { InitiateCustomTransferRequest, InitiateTransferRequest, } from '@sovity.de/edc-client'; +import {InitiateTransferConfirmTosDialogComponent} from 'src/app/component-library/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog/initiate-transfer-confirm-tos-dialog.component'; import {EdcApiService} from '../../../../core/services/api/edc-api.service'; import {DataAddressMapper} from '../../../../core/services/data-address-mapper'; import {HttpRequestParamsMapper} from '../../../../core/services/http-params-mapper.service'; @@ -77,6 +82,7 @@ export class ContractAgreementTransferDialogComponent implements OnDestroy { public form: ContractAgreementTransferDialogForm, public validationMessages: ValidationMessages, private dialogRef: MatDialogRef, + private confirmationDialog: MatDialog, private edcApiService: EdcApiService, private notificationService: NotificationService, private httpRequestParamsMapper: HttpRequestParamsMapper, @@ -88,37 +94,47 @@ export class ContractAgreementTransferDialogComponent implements OnDestroy { if (this.loading && !this.form.all.valid) { return; } - this.loading = true; - this.form.all.disable(); - - const value = this.form.value; - let request$: Observable; - if (value.dataAddressType === 'Custom-Transfer-Process-Request') { - const request = this.buildCustomTransferRequest(value); - request$ = this.edcApiService.initiateCustomTransfer(request); - } else { - const request = this.buildTransferRequest(value); - request$ = this.edcApiService.initiateTransfer(request); - } - request$ - .pipe( - finalize(() => { - this.loading = false; - this.form.all.enable(); - }), - ) - .subscribe({ - next: (response) => - this.close({ - transferProcessId: response.id!, - contractId: this.data.contractId, - }), - error: (err) => { - this.notificationService.showError('Failed initiating transfer!'); - console.error('Failed initiating transfer', err); - }, - }); + const confirmationDialogRef = this.confirmationDialog.open( + InitiateTransferConfirmTosDialogComponent, + {maxWidth: '30%'}, + ); + + confirmationDialogRef.afterClosed().subscribe((result) => { + if (result) { + this.loading = true; + this.form.all.disable(); + + const value = this.form.value; + let request$: Observable; + if (value.dataAddressType === 'Custom-Transfer-Process-Request') { + const request = this.buildCustomTransferRequest(value); + request$ = this.edcApiService.initiateCustomTransfer(request); + } else { + const request = this.buildTransferRequest(value); + request$ = this.edcApiService.initiateTransfer(request); + } + + request$ + .pipe( + finalize(() => { + this.loading = false; + this.form.all.enable(); + }), + ) + .subscribe({ + next: (response) => + this.close({ + transferProcessId: response.id!, + contractId: this.data.contractId, + }), + error: (err) => { + this.notificationService.showError('Failed initiating transfer!'); + console.error('Failed initiating transfer', err); + }, + }); + } + }); } private close(params: ContractAgreementTransferDialogResult) {