Minor

fylein · Dec 26, 2024 · 648f6c0 · 648f6c0
1 parent 8e62320
commit 648f6c0
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 2 deletions.
diff --git a/src/app/shared/components/popup-alert/popup-alert.component.html b/src/app/shared/components/popup-alert/popup-alert.component.html
@@ -5,6 +5,30 @@
     </div>
   </ion-header>
 
+  <div class="popup-alert--card-details-container" *ngIf="cardsList?.successfulCards?.length > 0">
+    <div class="popup-alert--content-container">
+      <div class="popup-alert--success-tick-container">
+        <ion-icon class="popup-alert--success-tick" src="/assets/svg/check.svg"></ion-icon>
+      </div>
+      <div>
+        <div class="popup-alert--content-header">Successfully connected</div>
+        <div class="popup-alert--card-numbers">
+          {{ cardsList?.successfulCards?.join() }}
+        </div>
+      </div>
+    </div>
+    <div class="popup-alert--content-container">
+      <div class="popup-alert--error-tick-container">
+        <ion-icon class="popup-alert--error-icon" src="/assets/svg/error-outlined.svg"></ion-icon>
+      </div>
+      <div>
+        <div class="popup-alert--content-header">Failed Connecting</div>
+        <div class="popup-alert--card-numbers">
+          {{ cardsList?.failedCards?.join(', ') }}
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="popup-alert--body ion-text-center" [innerHtml]="message"></div>
 
   <div class="popup-alert--info-container" *ngIf="flaggedExpensesCount">

diff --git a/src/app/shared/components/popup-alert/popup-alert.component.scss b/src/app/shared/components/popup-alert/popup-alert.component.scss
@@ -54,4 +54,73 @@ $small-screen: 700px;
       background: $red;
     }
   }
+
+  &--success-tick-container {
+    border-radius: 4px;
+    background: $success-bg;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--success-tick {
+    height: 14px;
+    width: 14px;
+    fill: $green;
+  }
+
+  &--success-tick-container {
+    border-radius: 4px;
+    background: $success-bg;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--success-tick {
+    height: 14px;
+    width: 14px;
+    fill: $green;
+  }
+
+  &--error-tick-container {
+    border-radius: 4px;
+    background: $pale-pink;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--error-icon {
+    height: 14px;
+    width: 14px;
+    fill: $red;
+  }
+
+  &--content-container {
+    display: flex;
+    padding: 12px;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+    border-radius: 4px;
+    border: 1px solid $border-tertiary;
+    padding: 12px;
+    margin-bottom: 16px;
+  }
+
+  &--content-header {
+    color: $black;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.4;
+    margin-bottom: 6px;
+  }
 }
diff --git a/src/app/shared/components/popup-alert/popup-alert.component.ts b/src/app/shared/components/popup-alert/popup-alert.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
+import { CardNetworkType } from 'src/app/core/enums/card-network-type';
+import { PopoverCardsList } from 'src/app/core/models/popover-cards-list.model';
 @Component({
   selector: 'app-popup-alert',
   templateUrl: './popup-alert.component.html',
@@ -16,9 +18,11 @@ export class PopupAlertComponent {
 
   @Input() flaggedExpensesCount = 0;
 
+  @Input() cardsList: PopoverCardsList;
+
   constructor(private popoverController: PopoverController) {}
 
-  ctaClickedEvent(action) {
+  ctaClickedEvent(action: string): void {
     this.popoverController.dismiss({
       action,
     });

diff --git a/src/assets/svg/check.svg b/src/assets/svg/check.svg