procurement-mode.component.html

<p class="mb-3 text-gray-500 dark:text-gray-400">Define which parts of the procurement/activation process will be performed automatically and which ones will be performed manually by the provider</p>

<div class="flex flex-col gap-4">
  <div class="flex flex-col gap-2">
    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
      {{ 'FORMS.PROCUREMENT_MODE._title' | translate }}
    </label>
    <div [formGroup]="formGroup">
      <select data-cy="procurement" formControlName="mode" class="w-full p-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
        @for (mode of procurementModes; track mode.id) {
          <option [value]="mode.id">{{ mode.name }}</option>
        }
      </select>
    </div>
  </div>
</div>

@if (extBillingEnabledControl) {
  <div class="mt-4 flex items-center gap-3">
    <label class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._ext_billing' | translate }}</label>
    <input data-cy="extBillingToggle" type="checkbox" [formControl]="extBillingEnabledControl"
           class="w-4 h-4 text-primary-100 bg-gray-100 border-gray-300 rounded focus:ring-primary-100 dark:focus:ring-primary-50 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"/>
  </div>
}
@if (extBillingEnabledControl?.value && plaSpecIdControl) {
  <label for="plaSpecId" class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._pla_spec_id' | translate }}</label>
  <input data-cy="plaSpecId" id="plaSpecId" type="url" [formControl]="plaSpecIdControl"
         class="bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
         [class.border-red-500]="plaSpecIdControl.invalid && plaSpecIdControl.touched"
         placeholder="https://external-billing-engine.example.com"/>
  @if (plaSpecIdControl.invalid && plaSpecIdControl.touched) {
    <p class="text-red-500 text-sm mt-1 mb-2">{{ 'CREATE_OFFER._pla_spec_id_required' | translate }}</p>
  }
}

@if(showProcurementError){
  <div
  class="flex justify-center items-center fixed w-fit top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50"
>
    <div
      id="alert-additional-content-2"
      class="relative p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-red-900 dark:border-red-900 dark:text-white"
      role="alert"
    >
      <!-- Close button -->
      <button
        type="button"
        class="absolute top-2 right-2 text-red-500 hover:text-red-700 dark:text-white dark:hover:text-gray-300"
        (click)="showProcurementError = false"
        aria-label="Close"
      >
        <svg
          class="w-4 h-4"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>

      <div class="flex items-center">
        <svg
          class="flex-shrink-0 w-4 h-4 me-2"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="currentColor"
          viewBox="0 0 20 20"
        >
          <path
            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
          />
        </svg>
        <h3 class="text-lg font-medium">Warning!</h3>
      </div>
      <div class="mt-2 mb-4 text-sm">
        {{ errorMessage }}
        <!-- Link under error message -->
        <p class="mt-2">
          <a href="{{ gatewayUrl }}" target="_blank" class="text-sm font-medium text-red-600 hover:underline dark:text-red-300">
            Check the payment gateway here.
          </a>
        </p>
      </div>
    </div>
</div>
}