feat(checkout): enhance transfer payment flow with DNI input handling and completion action

src/app/features/store/pages/checkout-page/checkout-payment-step.component.html

@@ -47,33 +47,12 @@
           [copiedTransferField]="copiedTransferField()"
           (copyTransferValue)="requestCopy($event.field, $event.value)"
           (submitDni)="generateTransferIntent.emit($event)"
+          (completePurchase)="complete.emit()"
         />
       } @else {
         <app-checkout-payment-telepagos />
       }
     </section>
   </div>
-
-  <div class="checkout-payment__actions">
-    <app-button
-      type="button"
-      variant="cancel"
-      hostClass="checkout-payment__action-btn"
-      buttonClass="w-100"
-      [disabled]="true"
-    >
-      Cancelar
-    </app-button>
-
-    <app-button
-      type="button"
-      hostClass="checkout-payment__action-btn"
-      buttonClass="w-100"
-      [disabled]="isGeneratingIntent() || (selectedPaymentMethod() === 'transfer' && !transferAccount())"
-      (click)="complete.emit()"
-    >
-      Finalizar compra
-    </app-button>
-  </div>
 </div>
 

src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html

@@ -1,63 +1,29 @@
 <div class="payment-panel__card">
-  @if (transferAccount()) {
-    <h3 class="payment-panel__title">Transferi a la siguiente cuenta desde cualquier billetera</h3>
-    <div class="payment-panel__divider"></div>
-
-    <div class="payment-panel__account">
-      <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
-
-      <div class="payment-detail">
-        <span class="payment-detail__label">Titular:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.titular }}</strong>
-      </div>
-
-      <div class="payment-detail">
-        <span class="payment-detail__label">Entidad:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.entidad }}</strong>
-      </div>
-
-      <div class="payment-detail payment-detail--copy">
-        <span class="payment-detail__label">CVU:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.cvu }}</strong>
-        <app-icon-button
-          variant="copy"
-          ariaLabel="Copiar CVU"
-          (click)="requestCopy('cvu', transferAccount()!.cvu)"
+  <div class="dni-form-container">
+    <h3 class="dni-form-title">Ingresá DNI de quién va a transferir</h3>
+    <form class="dni-form row gx-2" (submit)="$event.preventDefault(); onSubmitDni()">
+      <div class="col-8">
+        <app-input
+          type="text"
+          placeholder="99.999.999"
+          [value]="dniControl.value"
+          (valueChange)="dniControl.setValue($event.toString()); dniControl.markAsDirty()"
+          [disabled]="isDniDisabled()"
+          [invalid]="dniControl.invalid && (dniControl.dirty || dniControl.touched)"
         />
       </div>
-
-      @if (copiedTransferField() === 'cvu') {
-        <small class="payment-detail__feedback">CVU copiado</small>
-      }
-
-      <div class="payment-detail payment-detail--copy">
-        <span class="payment-detail__label">Alias:</span>
-        <strong class="payment-detail__value">{{ transferAccount()!.alias }}</strong>
-        <app-icon-button
-          variant="copy"
-          ariaLabel="Copiar alias"
-          (click)="requestCopy('alias', transferAccount()!.alias)"
-        />
-      </div>
-
-      @if (copiedTransferField() === 'alias') {
-        <small class="payment-detail__feedback">Alias copiado</small>
-      }
-    </div>
-  } @else {
-    <div class="dni-form-container">
-      <h3 class="dni-form-title">Ingresá DNI de quién va a transferir</h3>
-      <form class="dni-form row gx-2" (ngSubmit)="onSubmitDni()">
-        <div class="col-8">
-          <app-input
-            type="text"
-            placeholder="99.999.999"
-            [value]="dniControl.value"
-            (valueChange)="dniControl.setValue($event.toString()); dniControl.markAsDirty()"
-            [invalid]="dniControl.invalid && (dniControl.dirty || dniControl.touched)"
-          />
-        </div>
-        <div class="col-4">
+      <div class="col-4">
+        @if (isDniDisabled()) {
+          <app-button
+            type="button"
+            variant="secondary"
+            hostClass="w-100 h-100"
+            buttonClass="w-100 h-100 px-0"
+            (click)="enableEditing()"
+          >
+            Modificar
+          </app-button>
+        } @else {
           <app-button
             type="submit"
             variant="primary"
@@ -67,8 +33,63 @@
           >
             Continuar
           </app-button>
-        </div>
-      </form>
+        }
+      </div>
+    </form>
+  </div>
+
+  @if (transferAccount()) {
+    <div class="payment-panel__divider"></div>
+    <div class="payment-panel__account">
+      <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
+
+      <div class="payment-detail">
+        <span class="payment-detail__label">Titular:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.titular }}</span>
+      </div>
+
+      <div class="payment-detail">
+        <span class="payment-detail__label">Entidad:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.entidad }}</span>
+      </div>
+
+      <div class="payment-detail payment-detail--copy">
+        <span class="payment-detail__label">CVU:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.cvu }}</span>
+        <app-icon-button
+          variant="copy"
+          ariaLabel="Copiar CVU"
+          (click)="requestCopy('cvu', transferAccount()!.cvu)"
+        />
+        @if (copiedTransferField() === 'cvu') {
+          <span class="payment-detail__feedback" style="grid-column: 1 / -1; text-align: center;">¡Copiado!</span>
+        }
+      </div>
+
+      <div class="payment-detail payment-detail--copy">
+        <span class="payment-detail__label">Alias:</span>
+        <span class="payment-detail__value">{{ transferAccount()?.alias }}</span>
+        <app-icon-button
+          variant="copy"
+          ariaLabel="Copiar Alias"
+          (click)="requestCopy('alias', transferAccount()!.alias)"
+        />
+        @if (copiedTransferField() === 'alias') {
+          <span class="payment-detail__feedback" style="grid-column: 1 / -1; text-align: center;">¡Copiado!</span>
+        }
+      </div>
+    </div>
+
+    <div class="mt-4">
+      <app-button
+        type="button"
+        variant="primary"
+        hostClass="w-100"
+        buttonClass="w-100"
+        (click)="completePurchase.emit()"
+      >
+        Ya transferí
+      </app-button>
     </div>
   }
 </div>

src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
 import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
@@ -19,19 +19,28 @@ export class CheckoutPaymentTransferComponent {
 
   readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly submitDni = output<string>();
+  readonly completePurchase = output<void>();
 
   protected readonly dniControl = new FormControl('', {
     nonNullable: true,
     validators: [Validators.required, Validators.pattern(/^\d{7,8}$/)]
   });
 
+  protected readonly isEditing = signal<boolean>(false);
+  protected readonly isDniDisabled = computed(() => !!this.transferAccount() && !this.isEditing());
+
   protected requestCopy(field: TransferField, value: string): void {
     this.copyTransferValue.emit({ field, value });
   }
 
   protected onSubmitDni(): void {
     if (this.dniControl.valid) {
+      this.isEditing.set(false);
       this.submitDni.emit(this.dniControl.value);
     }
   }
+
+  protected enableEditing(): void {
+    this.isEditing.set(true);
+  }
 }