From 674258c34f5d0f72ab698b89c638c79a92ba29ca Mon Sep 17 00:00:00 2001
From: illfixit <66363651+illfixit@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:03:50 +0100
Subject: [PATCH] feat: add mat steps to the transfer dialog

---
 ...t-agreement-transfer-dialog.component.html | 726 +++++++++---------
 1 file changed, 374 insertions(+), 352 deletions(-)

diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html
index 1414fa2c..1b20c328 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.html
@@ -2,393 +2,415 @@ <h1 mat-dialog-title>
   {{ 'contract_agreement_page.ini_transfer' | translate }}
 </h1>
 <mat-dialog-content class="w-[800px]">
-  <form [formGroup]="form.all">
-    <div class="flex flex-col mt-[10px]">
-      <div class="form-section-title">
-        {{ 'contract_agreement_page.datasink' | translate }}
-      </div>
+  <mat-vertical-stepper [linear]="false">
+    <mat-step>
+      <form [formGroup]="form.all">
+        <div class="flex flex-col mt-[10px]">
+          <ng-template class="form-section-title" matStepLabel>
+            {{ 'contract_agreement_page.datasink' | translate }}
+          </ng-template>
 
-      <!-- Data Address Type -->
-      <data-address-type-select
-        mode="Datasink"
-        [label]="'general.type' | translate"
-        [control]="
-          form.all.controls.dataAddressType
-        "></data-address-type-select>
+          <!-- Data Address Type -->
+          <data-address-type-select
+            mode="Datasink"
+            [label]="'general.type' | translate"
+            [control]="
+              form.all.controls.dataAddressType
+            "></data-address-type-select>
 
-      <!-- Datasink Config JSON -->
-      <mat-form-field
-        *ngIf="
-          form.dataAddressType === 'Custom-Data-Address-Json' &&
-            form.all.controls.dataDestination;
-          let ctrl
-        "
-        color="accent">
-        <mat-label>{{
-          'contract_agreement_page.cus_datasink' | translate
-        }}</mat-label>
-        <textarea
-          matInput
-          placeholder='{"https://w3id.org/edc/v0.0.1/ns/type": "HttpData", ...}'
-          [formControl]="ctrl"></textarea>
-        <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
-          {{ validationMessages.invalidJsonMessage }}
-        </mat-error>
-      </mat-form-field>
-
-      <!-- Transfer Process Request JSON -->
-      <mat-form-field
-        *ngIf="
-          form.dataAddressType === 'Custom-Transfer-Process-Request' &&
-            form.all.controls.transferProcessRequest;
-          let ctrl
-        "
-        color="accent">
-        <mat-label>{{
-          'contract_agreement_page.cus_transfer' | translate
-        }}</mat-label>
-        <textarea matInput [formControl]="ctrl" [placeholder]="'{}'"></textarea>
-        <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
-          {{ validationMessages.invalidJsonMessage }}
-        </mat-error>
-        <mat-hint>
-          {{ 'contract_agreement_page.json_hint' | translate }}
-        </mat-hint>
-      </mat-form-field>
-
-      <!-- Source Endpoint (Rest-Api) -->
-      <ng-container *ngIf="form.dataAddressType === 'Http'">
-        <!-- Method (Rest-Api) -->
-        <div class="flex flex-row space-x-[10px]">
-          <!-- Method (Rest-Api) -->
-          <mat-form-field
-            *ngIf="form.all.controls.httpMethod; let ctrl"
-            class="w-1/3">
-            <mat-label>{{ 'general.method' | translate }}</mat-label>
-            <mat-select [formControl]="ctrl">
-              <mat-option
-                *ngFor="let method of dataSinkMethods"
-                [value]="method"
-                >{{ method }}</mat-option
-              >
-            </mat-select>
-          </mat-form-field>
+          <!-- Datasink Config JSON -->
           <mat-form-field
-            *ngIf="form.all.controls.httpUrl; let ctrl"
-            class="grow"
+            *ngIf="
+              form.dataAddressType === 'Custom-Data-Address-Json' &&
+                form.all.controls.dataDestination;
+              let ctrl
+            "
             color="accent">
-            <mat-label>URL</mat-label>
-            <input matInput [formControl]="ctrl" [placeholder]="'https://'" />
-            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.url">
-              {{ validationMessages.invalidUrlMessage }}
-            </mat-error>
-          </mat-form-field>
-        </div>
-
-        <div class="form-section-title">{{ 'general.auth' | translate }}</div>
-
-        <!-- Add Authentication Button -->
-        <div
-          *ngIf="form.all.controls.httpAuthHeaderType.value === 'None'"
-          class="flex flex-row mb-[10px]">
-          <button
-            mat-button
-            color="accent"
-            (click)="
-              form.all.controls.httpAuthHeaderType.setValue('Vault-Secret')
-            ">
-            {{ 'general.add_auth' | translate }}
-          </button>
-        </div>
-
-        <!-- Auth Header Value Type -->
-        <mat-form-field
-          *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
-          class="grow">
-          <mat-label>Type</mat-label>
-          <mat-select [formControl]="form.all.controls.httpAuthHeaderType">
-            <mat-option value="Vault-Secret">
-              {{ 'general.header_sec' | translate }}
-            </mat-option>
-            <mat-option value="Value">{{
-              'general.header_val' | translate
-            }}</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <div
-          *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
-          class="flex flex-row space-x-[10px]">
-          <!-- Auth Header Name -->
-          <mat-form-field class="w-1/3">
-            <mat-label>{{ 'general.auth_header' | translate }}</mat-label>
-            <input
-              matInput
-              placeholder="Authorization"
-              [formControl]="form.all.controls.httpAuthHeaderName" />
-          </mat-form-field>
-
-          <!-- Auth Header Value -->
-          <mat-form-field
-            *ngIf="form.all.controls.httpAuthHeaderType.value === 'Value'"
-            class="grow">
-            <mat-label>{{ 'general.auth_value' | translate }}</mat-label>
-            <input
+            <mat-label>{{
+              'contract_agreement_page.cus_datasink' | translate
+            }}</mat-label>
+            <textarea
               matInput
-              placeholder="Bearer ..."
-              [formControl]="form.all.controls.httpAuthHeaderValue" />
+              placeholder='{"https://w3id.org/edc/v0.0.1/ns/type": "HttpData", ...}'
+              [formControl]="ctrl"></textarea>
+            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
+              {{ validationMessages.invalidJsonMessage }}
+            </mat-error>
           </mat-form-field>
 
-          <!-- Auth Header Secret Name -->
+          <!-- Transfer Process Request JSON -->
           <mat-form-field
             *ngIf="
-              form.all.controls.httpAuthHeaderType.value === 'Vault-Secret'
+              form.dataAddressType === 'Custom-Transfer-Process-Request' &&
+                form.all.controls.transferProcessRequest;
+              let ctrl
             "
-            class="grow">
-            <mat-label>{{ 'general.vault_secret' | translate }}</mat-label>
-            <input
+            color="accent">
+            <mat-label>{{
+              'contract_agreement_page.cus_transfer' | translate
+            }}</mat-label>
+            <textarea
               matInput
-              placeholder="MySecret123"
-              [formControl]="form.all.controls.httpAuthHeaderSecretName" />
+              [formControl]="ctrl"
+              [placeholder]="'{}'"></textarea>
+            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
+              {{ validationMessages.invalidJsonMessage }}
+            </mat-error>
+            <mat-hint>
+              {{ 'contract_agreement_page.json_hint' | translate }}
+            </mat-hint>
           </mat-form-field>
-        </div>
 
-        <!-- Remove Authentication Button -->
-        <div
-          *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
-          class="flex flex-row mb-[10px]">
-          <button
-            mat-button
-            color="warn"
-            (click)="form.all.controls.httpAuthHeaderType.setValue('None')">
-            {{ 'general.rem_auth' | translate }}
-          </button>
-        </div>
+          <!-- Source Endpoint (Rest-Api) -->
+          <ng-container *ngIf="form.dataAddressType === 'Http'">
+            <!-- Method (Rest-Api) -->
+            <div class="flex flex-row space-x-[10px]">
+              <!-- Method (Rest-Api) -->
+              <mat-form-field
+                *ngIf="form.all.controls.httpMethod; let ctrl"
+                class="w-1/3">
+                <mat-label>{{ 'general.method' | translate }}</mat-label>
+                <mat-select [formControl]="ctrl">
+                  <mat-option
+                    *ngFor="let method of dataSinkMethods"
+                    [value]="method"
+                    >{{ method }}</mat-option
+                  >
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field
+                *ngIf="form.all.controls.httpUrl; let ctrl"
+                class="grow"
+                color="accent">
+                <mat-label>URL</mat-label>
+                <input
+                  matInput
+                  [formControl]="ctrl"
+                  [placeholder]="'https://'" />
+                <mat-error *ngIf="ctrl.invalid && ctrl.errors?.url">
+                  {{ validationMessages.invalidUrlMessage }}
+                </mat-error>
+              </mat-form-field>
+            </div>
 
-        <div class="form-section-title">
-          {{ 'general.add_header' | translate }}
-        </div>
+            <div class="form-section-title">
+              {{ 'general.auth' | translate }}
+            </div>
 
-        <div
-          *ngFor="
-            let header of form.all.controls.httpHeaders.controls;
-            let i = index
-          "
-          class="flex flex-row space-x-[10px]">
-          <!-- Header Name -->
-          <mat-form-field class="w-1/3">
-            <mat-label>{{ 'general.header_name' | translate }}</mat-label>
-            <input
-              matInput
-              placeholder="Header"
-              [formControl]="header.controls.headerName" />
-          </mat-form-field>
+            <!-- Add Authentication Button -->
+            <div
+              *ngIf="form.all.controls.httpAuthHeaderType.value === 'None'"
+              class="flex flex-row mb-[10px]">
+              <button
+                mat-button
+                color="accent"
+                (click)="
+                  form.all.controls.httpAuthHeaderType.setValue('Vault-Secret')
+                ">
+                {{ 'general.add_auth' | translate }}
+              </button>
+            </div>
 
-          <!-- Header Value -->
-          <mat-form-field class="grow">
-            <mat-label>{{ 'general.header_value' | translate }}</mat-label>
-            <input
-              matInput
-              placeholder="..."
-              [formControl]="header.controls.headerValue" />
-          </mat-form-field>
+            <!-- Auth Header Value Type -->
+            <mat-form-field
+              *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
+              class="grow">
+              <mat-label>Type</mat-label>
+              <mat-select [formControl]="form.all.controls.httpAuthHeaderType">
+                <mat-option value="Vault-Secret">
+                  {{ 'general.header_sec' | translate }}
+                </mat-option>
+                <mat-option value="Value">{{
+                  'general.header_val' | translate
+                }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div
+              *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
+              class="flex flex-row space-x-[10px]">
+              <!-- Auth Header Name -->
+              <mat-form-field class="w-1/3">
+                <mat-label>{{ 'general.auth_header' | translate }}</mat-label>
+                <input
+                  matInput
+                  placeholder="Authorization"
+                  [formControl]="form.all.controls.httpAuthHeaderName" />
+              </mat-form-field>
 
-          <!-- Header Delete Button -->
-          <button
-            mat-button
-            color="warn"
-            style="height: 54px; margin-top: 4px; margin-left: 8px"
-            (click)="form.onHttpHeadersRemoveClick(i)">
-            {{ 'general.remove' | translate }}
-          </button>
-        </div>
+              <!-- Auth Header Value -->
+              <mat-form-field
+                *ngIf="form.all.controls.httpAuthHeaderType.value === 'Value'"
+                class="grow">
+                <mat-label>{{ 'general.auth_value' | translate }}</mat-label>
+                <input
+                  matInput
+                  placeholder="Bearer ..."
+                  [formControl]="form.all.controls.httpAuthHeaderValue" />
+              </mat-form-field>
 
-        <!-- Add Header Button -->
-        <div class="flex flex-row mb-[10px]">
-          <button
-            mat-button
-            color="accent"
-            (click)="form.onHttpHeadersAddClick()">
-            {{ 'general.add_add_header' | translate }}
-          </button>
-        </div>
-      </ng-container>
+              <!-- Auth Header Secret Name -->
+              <mat-form-field
+                *ngIf="
+                  form.all.controls.httpAuthHeaderType.value === 'Vault-Secret'
+                "
+                class="grow">
+                <mat-label>{{ 'general.vault_secret' | translate }}</mat-label>
+                <input
+                  matInput
+                  placeholder="MySecret123"
+                  [formControl]="form.all.controls.httpAuthHeaderSecretName" />
+              </mat-form-field>
+            </div>
 
-      <ng-container
-        *ngIf="form.dataAddressType !== 'Custom-Transfer-Process-Request'">
-        <div class="form-section-title">
-          {{ 'contract_agreement_page.http_para' | translate }}
-        </div>
+            <!-- Remove Authentication Button -->
+            <div
+              *ngIf="form.all.controls.httpAuthHeaderType.value !== 'None'"
+              class="flex flex-row mb-[10px]">
+              <button
+                mat-button
+                color="warn"
+                (click)="form.all.controls.httpAuthHeaderType.setValue('None')">
+                {{ 'general.rem_auth' | translate }}
+              </button>
+            </div>
 
-        <div class="text-sm mb-[10px] px-[3px]">
-          {{ 'contract_agreement_page.http_message' | translate }}
-        </div>
+            <div class="form-section-title">
+              {{ 'general.add_header' | translate }}
+            </div>
 
-        <div
-          *ngIf="proxyPath || proxyMethod"
-          class="text-sm mb-[10px] px-[3px]">
-          {{ 'contract_agreement_page.res_url' | translate }}
-          <i>{{
-            '{baseUrl}{customSubPath}?{baseQueryParams}&{customQueryParams}'
-          }}</i>
-        </div>
+            <div
+              *ngFor="
+                let header of form.all.controls.httpHeaders.controls;
+                let i = index
+              "
+              class="flex flex-row space-x-[10px]">
+              <!-- Header Name -->
+              <mat-form-field class="w-1/3">
+                <mat-label>{{ 'general.header_name' | translate }}</mat-label>
+                <input
+                  matInput
+                  placeholder="Header"
+                  [formControl]="header.controls.headerName" />
+              </mat-form-field>
 
-        <div
-          *ngIf="proxyMethod || proxyPath"
-          class="flex flex-row space-x-[10px]">
-          <ng-container *ngIf="proxyMethod">
-            <!-- Method (Rest-Api) -->
-            <mat-form-field
-              *ngIf="form.all.controls.httpProxiedMethod; let ctrl"
-              [ngClass]="{'w-1/3': proxyPath}">
-              <mat-label>{{
-                'contract_agreement_page.cus_meth' | translate
-              }}</mat-label>
-              <mat-select
-                [placeholder]="'contract_agreement_page.cus_meth' | translate"
-                [formControl]="ctrl">
-                <mat-option></mat-option>
-                <mat-option
-                  *ngFor="let method of dataSourceMethods"
-                  [value]="method"
-                  >{{ method }}</mat-option
-                >
-              </mat-select>
-              <mat-hint>
-                {{
-                  'contract_agreement_page.proxy_method' | translate
-                }}</mat-hint
-              >
-            </mat-form-field>
-          </ng-container>
+              <!-- Header Value -->
+              <mat-form-field class="grow">
+                <mat-label>{{ 'general.header_value' | translate }}</mat-label>
+                <input
+                  matInput
+                  placeholder="..."
+                  [formControl]="header.controls.headerValue" />
+              </mat-form-field>
 
-          <ng-container *ngIf="proxyPath">
-            <!-- Default Path (Rest-Api) -->
-            <mat-form-field
-              *ngIf="form.all.controls.httpProxiedPath; let ctrl"
-              class="grow">
-              <mat-label>{{
-                'contract_agreement_page.cus_sub' | translate
-              }}</mat-label>
-              <input
-                matInput
-                [formControl]="ctrl"
-                [placeholder]="'sub-path/endpoint'" />
-              <mat-hint>{{
-                'contract_agreement_page.proxy_path' | translate
-              }}</mat-hint>
-            </mat-form-field>
+              <!-- Header Delete Button -->
+              <button
+                mat-button
+                color="warn"
+                style="height: 54px; margin-top: 4px; margin-left: 8px"
+                (click)="form.onHttpHeadersRemoveClick(i)">
+                {{ 'general.remove' | translate }}
+              </button>
+            </div>
+
+            <!-- Add Header Button -->
+            <div class="flex flex-row mb-[10px]">
+              <button
+                mat-button
+                color="accent"
+                (click)="form.onHttpHeadersAddClick()">
+                {{ 'general.add_add_header' | translate }}
+              </button>
+            </div>
           </ng-container>
         </div>
+      </form>
+    </mat-step>
+
+    <ng-container
+      *ngIf="form.dataAddressType !== 'Custom-Transfer-Process-Request'">
+      <mat-step>
+        <form [formGroup]="form.all">
+          <ng-template class="form-section-title" matStepLabel>
+            {{ 'contract_agreement_page.http_para' | translate }}
+          </ng-template>
+
+          <div class="text-sm mb-[10px] px-[3px]">
+            {{ 'contract_agreement_page.http_message' | translate }}
+          </div>
 
-        <ng-container *ngIf="proxyQueryParams">
           <div
-            *ngFor="
-              let header of form.all.controls.httpProxiedQueryParams.controls;
-              let i = index
-            "
-            class="flex flex-row space-x-[10px]">
-            <!-- Query Param Name -->
-            <mat-form-field class="w-1/3">
-              <mat-label>{{
-                'contract_agreement_page.cus_query' | translate
-              }}</mat-label>
-              <input
-                matInput
-                placeholder="key"
-                required
-                autocomplete="new-query-param-name"
-                [formControl]="header.controls.paramName" />
-              <mat-hint>
-                {{ 'contract_agreement_page.proxy_query' | translate }}
-              </mat-hint>
-            </mat-form-field>
+            *ngIf="proxyPath || proxyMethod"
+            class="text-sm mb-[10px] px-[3px]">
+            {{ 'contract_agreement_page.res_url' | translate }}
+            <i>{{
+              '{baseUrl}{customSubPath}?{baseQueryParams}&{customQueryParams}'
+            }}</i>
+          </div>
 
-            <!-- Query Param Value -->
-            <mat-form-field class="grow">
-              <mat-label>{{ 'general.value' | translate }}</mat-label>
-              <input
-                matInput
-                placeholder="..."
-                autocomplete="new-query-param-value"
-                [formControl]="header.controls.paramValue" />
-            </mat-form-field>
+          <div
+            *ngIf="proxyMethod || proxyPath"
+            class="flex flex-row space-x-[10px]">
+            <ng-container *ngIf="proxyMethod">
+              <!-- Method (Rest-Api) -->
+              <mat-form-field
+                *ngIf="form.all.controls.httpProxiedMethod; let ctrl"
+                [ngClass]="{'w-1/3': proxyPath}">
+                <mat-label>{{
+                  'contract_agreement_page.cus_meth' | translate
+                }}</mat-label>
+                <mat-select
+                  [placeholder]="'contract_agreement_page.cus_meth' | translate"
+                  [formControl]="ctrl">
+                  <mat-option></mat-option>
+                  <mat-option
+                    *ngFor="let method of dataSourceMethods"
+                    [value]="method"
+                    >{{ method }}</mat-option
+                  >
+                </mat-select>
+                <mat-hint>
+                  {{
+                    'contract_agreement_page.proxy_method' | translate
+                  }}</mat-hint
+                >
+              </mat-form-field>
+            </ng-container>
 
-            <!-- Query Param Delete Button -->
-            <button
-              mat-button
-              color="warn"
-              style="height: 54px; margin-top: 4px; margin-left: 8px"
-              (click)="form.onHttpQueryParamsRemoveClick(i)">
-              {{ 'general.remove' | translate }}
-            </button>
+            <ng-container *ngIf="proxyPath">
+              <!-- Default Path (Rest-Api) -->
+              <mat-form-field
+                *ngIf="form.all.controls.httpProxiedPath; let ctrl"
+                class="grow">
+                <mat-label>{{
+                  'contract_agreement_page.cus_sub' | translate
+                }}</mat-label>
+                <input
+                  matInput
+                  [formControl]="ctrl"
+                  [placeholder]="'sub-path/endpoint'" />
+                <mat-hint>{{
+                  'contract_agreement_page.proxy_path' | translate
+                }}</mat-hint>
+              </mat-form-field>
+            </ng-container>
           </div>
 
-          <div class="flex flex-row mb-[10px] space-x-[10px]">
-            <!-- Add Query Param Button -->
+          <ng-container *ngIf="proxyQueryParams">
+            <div
+              *ngFor="
+                let header of form.all.controls.httpProxiedQueryParams.controls;
+                let i = index
+              "
+              class="flex flex-row space-x-[10px]">
+              <!-- Query Param Name -->
+              <mat-form-field class="w-1/3">
+                <mat-label>{{
+                  'contract_agreement_page.cus_query' | translate
+                }}</mat-label>
+                <input
+                  matInput
+                  placeholder="key"
+                  required
+                  autocomplete="new-query-param-name"
+                  [formControl]="header.controls.paramName" />
+                <mat-hint>
+                  {{ 'contract_agreement_page.proxy_query' | translate }}
+                </mat-hint>
+              </mat-form-field>
+
+              <!-- Query Param Value -->
+              <mat-form-field class="grow">
+                <mat-label>{{ 'general.value' | translate }}</mat-label>
+                <input
+                  matInput
+                  placeholder="..."
+                  autocomplete="new-query-param-value"
+                  [formControl]="header.controls.paramValue" />
+              </mat-form-field>
+
+              <!-- Query Param Delete Button -->
+              <button
+                mat-button
+                color="warn"
+                style="height: 54px; margin-top: 4px; margin-left: 8px"
+                (click)="form.onHttpQueryParamsRemoveClick(i)">
+                {{ 'general.remove' | translate }}
+              </button>
+            </div>
+
+            <div class="flex flex-row mb-[10px] space-x-[10px]">
+              <!-- Add Query Param Button -->
+              <button
+                mat-button
+                color="accent"
+                (click)="form.onHttpQueryParamsAddClick()">
+                {{ 'contract_agreement_page.add_cus_query' | translate }}
+              </button>
+            </div>
+          </ng-container>
+
+          <ng-container *ngIf="proxyBody">
+            <!-- Request Body Content Type -->
+            <div class="flex flex-col">
+              <mat-form-field class="grow">
+                <mat-label>{{
+                  'contract_agreement_page.req_cont' | translate
+                }}</mat-label>
+                <input
+                  matInput
+                  autocomplete="new-content-type"
+                  [formControl]="form.all.controls.httpProxiedBodyContentType"
+                  [placeholder]="'application/json'" />
+                <mat-hint>
+                  {{ 'contract_agreement_page.proxy_body' | translate }}
+                </mat-hint>
+              </mat-form-field>
+
+              <!-- Request Body -->
+              <mat-form-field
+                *ngIf="form.all.controls.httpProxiedBody; let ctrl">
+                <mat-label>{{
+                  'contract_agreement_page.req_body' | translate
+                }}</mat-label>
+                <textarea
+                  class="min-h-[100px]"
+                  matInput
+                  placeholder='{"some": "request-body"}'
+                  autocomplete="new-request-body"
+                  [formControl]="ctrl"></textarea>
+                <mat-hint>
+                  {{
+                    'contract_agreement_page.proxy_body' | translate
+                  }}</mat-hint
+                >
+              </mat-form-field>
+            </div>
+          </ng-container>
+
+          <!-- Toggle Parameterization Fields Button -->
+          <div
+            *ngIf="
+              showHttpParameterizationToggleButton &&
+                form.all.controls.showAllHttpParameterizationFields;
+              let ctrl
+            "
+            class="flex flex-row mb-[10px]">
             <button
               mat-button
-              color="accent"
-              (click)="form.onHttpQueryParamsAddClick()">
-              {{ 'contract_agreement_page.add_cus_query' | translate }}
+              [color]="ctrl.value ? 'warn' : 'accent'"
+              (click)="ctrl.setValue(!ctrl.value)">
+              {{
+                ctrl.value
+                  ? ('general.hide' | translate)
+                  : ('general.show' | translate)
+              }}
+              {{ 'contract_agreement_page.http_fields' | translate }}
             </button>
           </div>
-        </ng-container>
-
-        <ng-container *ngIf="proxyBody">
-          <!-- Request Body Content Type -->
-          <mat-form-field class="grow">
-            <mat-label>{{
-              'contract_agreement_page.req_cont' | translate
-            }}</mat-label>
-            <input
-              matInput
-              autocomplete="new-content-type"
-              [formControl]="form.all.controls.httpProxiedBodyContentType"
-              [placeholder]="'application/json'" />
-            <mat-hint>
-              {{ 'contract_agreement_page.proxy_body' | translate }}
-            </mat-hint>
-          </mat-form-field>
-
-          <!-- Request Body -->
-          <mat-form-field *ngIf="form.all.controls.httpProxiedBody; let ctrl">
-            <mat-label>{{
-              'contract_agreement_page.req_body' | translate
-            }}</mat-label>
-            <textarea
-              matInput
-              placeholder='{"some": "request-body"}'
-              autocomplete="new-request-body"
-              [formControl]="ctrl"></textarea>
-            <mat-hint>
-              {{ 'contract_agreement_page.proxy_body' | translate }}</mat-hint
-            >
-          </mat-form-field>
-        </ng-container>
-
-        <!-- Toggle Parameterization Fields Button -->
-        <div
-          *ngIf="
-            showHttpParameterizationToggleButton &&
-              form.all.controls.showAllHttpParameterizationFields;
-            let ctrl
-          "
-          class="flex flex-row mb-[10px]">
-          <button
-            mat-button
-            [color]="ctrl.value ? 'warn' : 'accent'"
-            (click)="ctrl.setValue(!ctrl.value)">
-            {{
-              ctrl.value
-                ? ('general.hide' | translate)
-                : ('general.show' | translate)
-            }}
-            {{ 'contract_agreement_page.http_fields' | translate }}
-          </button>
-        </div>
-      </ng-container>
-    </div>
-  </form>
+        </form>
+      </mat-step>
+    </ng-container>
+  </mat-vertical-stepper>
 </mat-dialog-content>
 
 <mat-dialog-actions class="flex flex-row justify-end">