From 0fde8ed786870eeb7d5884b72446c04f49992833 Mon Sep 17 00:00:00 2001
From: Omkar Joshi <65808188+OmkarJ13@users.noreply.github.com>
Date: Mon, 9 Oct 2023 11:54:17 +0530
Subject: [PATCH] fix: Add card CTA usability issue (#2497)

---
 src/app/shared/components/add-card/add-card.component.html  | 6 +++---
 .../shared/components/add-card/add-card.component.spec.ts   | 6 +++---
 .../components/spent-cards/spent-cards.component.html       | 1 +
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/components/add-card/add-card.component.html b/src/app/shared/components/add-card/add-card.component.html
index 4b11e2342d..dbaec135d9 100644
--- a/src/app/shared/components/add-card/add-card.component.html
+++ b/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>
diff --git a/src/app/shared/components/add-card/add-card.component.spec.ts b/src/app/shared/components/add-card/add-card.component.spec.ts
index 3464e34951..c549961fb3 100644
--- a/src/app/shared/components/add-card/add-card.component.spec.ts
+++ b/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();
   });
diff --git a/src/app/shared/components/spent-cards/spent-cards.component.html b/src/app/shared/components/spent-cards/spent-cards.component.html
index 47a2ecc75c..3c3012ac14 100644
--- a/src/app/shared/components/spent-cards/spent-cards.component.html
+++ b/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">