PM-17187 Autofill new card information in the popout (#13688)

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -440,6 +440,32 @@ const mapAddEditCipherInfoToInitialValues = (
     initialValues.name = cipher.name;
   }
 
+  if (cipher.type === CipherType.Card) {
+    const card = cipher.card;
+
+    if (card != null) {
+      if (card.cardholderName != null) {
+        initialValues.cardholderName = card.cardholderName;
+      }
+
+      if (card.number != null) {
+        initialValues.number = card.number;
+      }
+
+      if (card.expMonth != null) {
+        initialValues.expMonth = card.expMonth;
+      }
+
+      if (card.expYear != null) {
+        initialValues.expYear = card.expYear;
+      }
+
+      if (card.code != null) {
+        initialValues.code = card.code;
+      }
+    }
+  }
+
   if (cipher.type === CipherType.Login) {
     const login = cipher.login;
 

libs/vault/src/cipher-form/abstractions/cipher-form-config.service.ts

@@ -25,6 +25,11 @@ export type OptionalInitialValues = {
   username?: string;
   password?: string;
   name?: string;
+  cardholderName?: string;
+  number?: string;
+  expMonth?: string;
+  expYear?: string;
+  code?: string;
 };
 
 /**

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

@@ -65,6 +65,8 @@ describe("CardDetailsSectionComponent", () => {
     cardView.cardholderName = "Ron Burgundy";
     cardView.number = "4242 4242 4242 4242";
     cardView.brand = "Visa";
+    cardView.expMonth = "";
+    cardView.code = "";
 
     expect(patchCipherSpy).toHaveBeenCalled();
     const patchFn = patchCipherSpy.mock.lastCall[0];
@@ -79,6 +81,10 @@ describe("CardDetailsSectionComponent", () => {
     });
 
     const cardView = new CardView();
+    cardView.cardholderName = "";
+    cardView.number = "";
+    cardView.expMonth = "";
+    cardView.code = "";
     cardView.expYear = "2022";
 
     expect(patchCipherSpy).toHaveBeenCalled();

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

@@ -97,6 +97,10 @@ export class CardDetailsSectionComponent implements OnInit {
 
   EventType = EventType;
 
+  get initialValues() {
+    return this.cipherFormContainer.config.initialValues;
+  }
+
   constructor(
     private cipherFormContainer: CipherFormContainer,
     private formBuilder: FormBuilder,
@@ -139,7 +143,9 @@ export class CardDetailsSectionComponent implements OnInit {
     const prefillCipher = this.cipherFormContainer.getInitialCipherView();
 
     if (prefillCipher) {
-      this.setInitialValues(prefillCipher);
+      this.initFromExistingCipher(prefillCipher.card);
+    } else {
+      this.initNewCipher();
     }
 
     if (this.disabled) {
@@ -147,6 +153,26 @@ export class CardDetailsSectionComponent implements OnInit {
     }
   }
 
+  private initFromExistingCipher(existingCard: CardView) {
+    this.cardDetailsForm.patchValue({
+      cardholderName: this.initialValues?.cardholderName ?? existingCard.cardholderName,
+      number: this.initialValues?.number ?? existingCard.number,
+      expMonth: this.initialValues?.expMonth ?? existingCard.expMonth,
+      expYear: this.initialValues?.expYear ?? existingCard.expYear,
+      code: this.initialValues?.code ?? existingCard.code,
+    });
+  }
+
+  private initNewCipher() {
+    this.cardDetailsForm.patchValue({
+      cardholderName: this.initialValues?.cardholderName || "",
+      number: this.initialValues?.number || "",
+      expMonth: this.initialValues?.expMonth || "",
+      expYear: this.initialValues?.expYear || "",
+      code: this.initialValues?.code || "",
+    });
+  }
+
   /** Get the section heading based on the card brand */
   getSectionHeading(): string {
     const { brand } = this.cardDetailsForm.value;