feat: set unique ids for form fields in payment components (#586)

intershop · Mar 1, 2021 · 832cdba · 832cdba
1 parent 3b0adb4
commit 832cdba
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/...checkout-payment/payment-concardis-creditcard/payment-concardis-creditcard.component.html b/...checkout-payment/payment-concardis-creditcard/payment-concardis-creditcard.component.html
@@ -29,7 +29,12 @@
     <div class="col-sm-6">
       <div class="clearfix row">
         <div class="col-6">
-          <select class="form-control" id="month" formControlName="expirationMonth" data-testing-id="expirationMonth">
+          <select
+            class="form-control"
+            id="concardis_creditcard_month"
+            formControlName="expirationMonth"
+            data-testing-id="expirationMonth"
+          >
             <option value="">{{ 'account.date.month' | translate }}</option>
             <option *ngFor="let option of monthOptions" [value]="option.value">{{ option.label | translate }}</option>
           </select>
@@ -39,7 +44,12 @@
           ></ish-form-control-feedback>
         </div>
         <div class="col-6">
-          <select class="form-control" id="year" formControlName="expirationYear" data-testing-id="expirationYear">
+          <select
+            class="form-control"
+            id="concardis_creditcard_year"
+            formControlName="expirationYear"
+            data-testing-id="expirationYear"
+          >
             <option value="">{{ 'account.date.year' | translate }}</option>
             <option *ngFor="let option of yearOptions" [value]="option.value">{{ option.label | translate }}</option>
           </select>

diff --git a/...kout-payment/payment-cybersource-creditcard/payment-cybersource-creditcard.component.html b/...kout-payment/payment-cybersource-creditcard/payment-cybersource-creditcard.component.html
@@ -31,7 +31,12 @@
     <div class="col-sm-6">
       <div class="clearfix row">
         <div class="col-6">
-          <select class="form-control" id="month" formControlName="expirationMonth" data-testing-id="expirationMonth">
+          <select
+            class="form-control"
+            id="cybersource_creditcard_month"
+            formControlName="expirationMonth"
+            data-testing-id="expirationMonth"
+          >
             <option value="">{{ 'account.date.month' | translate }}</option>
             <option *ngFor="let option of monthOptions" [value]="option.value">{{ option.label | translate }}</option>
           </select>
@@ -41,7 +46,12 @@
           ></ish-form-control-feedback>
         </div>
         <div class="col-6">
-          <select class="form-control" id="year" formControlName="expirationYear" data-testing-id="expirationYear">
+          <select
+            class="form-control"
+            id="cybersource_creditcard_year"
+            formControlName="expirationYear"
+            data-testing-id="expirationYear"
+          >
             <option value="">{{ 'account.date.year' | translate }}</option>
             <option *ngFor="let option of yearOptions" [value]="option.value">{{ option.label | translate }}</option>
           </select>