[PM-9589] Card Details Heading (#10023)

* only show branded card details when the brand isn't "other"

* use TS for the dynamic brand heading rather than template logic

libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.html

@@ -1,12 +1,7 @@
 <bit-section [formGroup]="cardDetailsForm">
   <bit-section-header>
     <h2 bitTypography="h5">
-      <ng-container *ngIf="cardDetailsForm.value.brand; else defaultHeading">
-        {{ "cardBrandDetails" | i18n: cardDetailsForm.value.brand }}
-      </ng-container>
-      <ng-template #defaultHeading>
-        {{ "cardDetails" | i18n }}
-      </ng-template>
+      {{ getSectionHeading() }}
     </h2>
   </bit-section-header>
   <bit-card>

libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts

@@ -28,7 +28,7 @@ describe("CardDetailsSectionComponent", () => {
       imports: [CardDetailsSectionComponent, CommonModule, ReactiveFormsModule],
       providers: [
         { provide: CipherFormContainer, useValue: cipherFormProvider },
-        { provide: I18nService, useValue: mock<I18nService>() },
+        { provide: I18nService, useValue: { t: (key: string) => key } },
       ],
     }).compileComponents();
   });
@@ -122,4 +122,24 @@ describe("CardDetailsSectionComponent", () => {
 
     expect(component.cardDetailsForm.controls.brand.value).toBe("Visa");
   });
+
+  it('displays brand heading text when "brand" is not "Other"', () => {
+    component.cardDetailsForm.patchValue({
+      brand: "Visa",
+    });
+
+    fixture.detectChanges();
+
+    const heading = fixture.debugElement.query(By.css("h2"));
+
+    expect(heading.nativeElement.textContent.trim()).toBe("cardBrandDetails");
+
+    component.cardDetailsForm.patchValue({
+      brand: "Other",
+    });
+
+    fixture.detectChanges();
+
+    expect(heading.nativeElement.textContent.trim()).toBe("cardDetails");
+  });
 });

libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts

@@ -145,6 +145,17 @@ export class CardDetailsSectionComponent implements OnInit {
     }
   }
 
+  /** Get the section heading based on the card brand */
+  getSectionHeading(): string {
+    const { brand } = this.cardDetailsForm.value;
+
+    if (brand && brand !== "Other") {
+      return this.i18nService.t("cardBrandDetails", brand);
+    }
+
+    return this.i18nService.t("cardDetails");
+  }
+
   /** Set form initial form values from the current cipher */
   private setInitialValues() {
     const { cardholderName, number, brand, expMonth, expYear, code } = this.originalCipherView.card;