fix: Add card CTA usability issue (#2497)

src/app/shared/components/add-card/add-card.component.html

@@ -1,9 +1,9 @@
-<div class="add-card-container">
+<div class="add-card-container" (click)="addCardClick.emit($event)" data-testid="add-card-container">
   <img class="add-card-container__img" src="../../../../assets/images/cards.svg" />
   <span *ngIf="showZeroStateMessage" data-testid="zero-state-message">No card added yet!</span>
 
-  <button class="add-card-container__cta" (click)="addCardClick.emit($event)" data-testid="add-card-button">
+  <div class="add-card-container__cta">
     <ion-icon class="add-card-container__cta-icon" src="../../../../assets/svg/plus.svg"></ion-icon>
     <span>Add Corporate Card</span>
-  </button>
+  </div>
 </div>

src/app/shared/components/add-card/add-card.component.spec.ts

@@ -42,11 +42,11 @@ describe('AddCardComponent', () => {
     expect(zeroStateMessageElement).toBeNull();
   });
 
-  it('should raise an event addCardClick when the add card button is clicked', () => {
+  it('should raise an event addCardClick when the add card container is clicked', () => {
     spyOn(component.addCardClick, 'emit');
 
-    const addCardButton = getElementRef(fixture, '[data-testid="add-card-button"]');
-    addCardButton.nativeElement.click();
+    const addCardContainer = getElementRef(fixture, '[data-testid="add-card-container"]');
+    addCardContainer.nativeElement.click();
 
     expect(component.addCardClick.emit).toHaveBeenCalled();
   });

src/app/shared/components/spent-cards/spent-cards.component.html

@@ -6,6 +6,7 @@
     [slidesPerView]="1.1"
     [spaceBetween]="16"
     [pagination]="pagination"
+    [centeredSlides]="cardDetails.length === 1 && !showAddCardSlide"
   >
     <ng-template *ngFor="let cardDetail of cardDetails" swiperSlide>
       <app-card-detail [cardDetail]="cardDetail" [homeCurrency]="homeCurrency" [currencySymbol]="currencySymbol">