feat(checkout): enhance checkout page with payment methods and form validation

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

@@ -1,137 +1,264 @@
 <div class="container-xl px-3 px-md-4 py-4">
-<div class="checkout-page">
+  <div class="checkout-page">
 
-  <!-- Left: Stepper with steps -->
+    <div class="checkout-page__stepper-col">
-  <div class="checkout-page__stepper-col">
+      <app-stepper #stepper>
-    <app-stepper #stepper>
 
-      <!-- Step 1: Datos -->
+        <app-step label="Datos" [isValid]="isStep1Valid()">
-      <app-step label="Datos" [isValid]="isStep1Valid()">
+          <form
-        <form
+            class="checkout-form"
-          class="checkout-form"
+            novalidate
-          novalidate
+            [formGroup]="form"
-          [formGroup]="form"
+            (ngSubmit)="onContinue()"
-          (ngSubmit)="onContinue()"
+          >
-        >
+            <div class="checkout-form__fields">
-          <div class="checkout-form__fields">
+              <div class="form-field">
+                <label class="form-field__label" for="checkout-nombre">
+                  Nombre y Apellido <span class="form-field__required" aria-hidden="true">*</span>
+                </label>
+                <app-input
+                  id="checkout-nombre"
+                  type="text"
+                  placeholder="Descripcion"
+                  [value]="form.controls.nombre.value"
+                  [invalid]="showControlError('nombre')"
+                  (valueChange)="updateField('nombre', $event)"
+                />
+                @if (getControlError('nombre'); as errorMessage) {
+                  <small class="form-field__error">{{ errorMessage }}</small>
+                }
+              </div>
 
-            <!-- Nombre y Apellido -->
+              <div class="form-field">
-            <div class="form-field">
+                <label class="form-field__label" for="checkout-email">
-              <label class="form-field__label" for="checkout-nombre">
+                  Email <span class="form-field__required" aria-hidden="true">*</span>
-                Nombre y Apellido <span class="form-field__required" aria-hidden="true">*</span>
+                </label>
-              </label>
+                <app-input
-              <app-input
+                  id="checkout-email"
-                id="checkout-nombre"
+                  type="email"
-                type="text"
+                  placeholder="Descripcion"
-                placeholder="Descripción"
+                  [value]="form.controls.email.value"
-                [value]="form.controls.nombre.value"
+                  [invalid]="showControlError('email')"
-                [invalid]="showControlError('nombre')"
+                  (valueChange)="updateField('email', $event)"
-                (valueChange)="updateField('nombre', $event)"
+                />
-              />
+                @if (getControlError('email'); as errorMessage) {
-              @if (getControlError('nombre'); as errorMessage) {
+                  <small class="form-field__error">{{ errorMessage }}</small>
-                <small class="form-field__error">{{ errorMessage }}</small>
+                }
-              }
+              </div>
+
+              <div class="form-field">
+                <label class="form-field__label" for="checkout-dni">
+                  DNI <span class="form-field__required" aria-hidden="true">*</span>
+                </label>
+                <app-input
+                  id="checkout-dni"
+                  type="text"
+                  placeholder="Descripcion"
+                  [value]="form.controls.dni.value"
+                  [invalid]="showControlError('dni')"
+                  (valueChange)="updateField('dni', $event)"
+                />
+                @if (getControlError('dni'); as errorMessage) {
+                  <small class="form-field__error">{{ errorMessage }}</small>
+                }
+              </div>
+
+              <div class="form-field">
+                <label class="form-field__label" for="checkout-telefono">
+                  Telefono <span class="form-field__required" aria-hidden="true">*</span>
+                </label>
+                <app-input
+                  id="checkout-telefono"
+                  type="text"
+                  placeholder="Descripcion"
+                  [value]="form.controls.telefono.value"
+                  [invalid]="showControlError('telefono')"
+                  (valueChange)="updateField('telefono', $event)"
+                />
+                @if (getControlError('telefono'); as errorMessage) {
+                  <small class="form-field__error">{{ errorMessage }}</small>
+                }
+              </div>
             </div>
 
-            <!-- Email -->
+            <div class="checkout-form__actions">
-            <div class="form-field">
+              <app-button
-              <label class="form-field__label" for="checkout-email">
+                type="button"
-                Email <span class="form-field__required" aria-hidden="true">*</span>
+                variant="cancel"
-              </label>
+                hostClass="checkout-form__action-btn"
-              <app-input
+                buttonClass="w-100"
-                id="checkout-email"
+                (click)="onCancel()"
-                type="email"
+              >
-                placeholder="Descripción"
+                Cancelar
-                [value]="form.controls.email.value"
+              </app-button>
-                [invalid]="showControlError('email')"
+              <app-button
-                (valueChange)="updateField('email', $event)"
+                type="submit"
-              />
+                hostClass="checkout-form__action-btn"
-              @if (getControlError('email'); as errorMessage) {
+                buttonClass="w-100"
-                <small class="form-field__error">{{ errorMessage }}</small>
+              >
-              }
+                Continuar
+              </app-button>
+            </div>
+          </form>
+        </app-step>
+
+        <app-step label="Pago">
+          <div class="checkout-payment">
+            <div class="checkout-payment__content">
+              <section class="payment-methods" aria-labelledby="payment-methods-title">
+                <h2 id="payment-methods-title" class="payment-methods__title">Selecciona el metodo de pago</h2>
+
+                <div class="payment-methods__list" role="radiogroup" aria-label="Metodo de pago">
+                  @for (method of paymentMethods; track method.id) {
+                    <label
+                      class="payment-method"
+                      [class.is-selected]="selectedPaymentMethod() === method.id"
+                    >
+                      <input
+                        class="payment-method__radio"
+                        type="radio"
+                        name="payment-method"
+                        [value]="method.id"
+                        [checked]="selectedPaymentMethod() === method.id"
+                        (change)="selectPaymentMethod(method.id)"
+                      />
+
+                      <span class="payment-method__label">
+                        @if (method.id === 'telepagos') {
+                          <span class="telepagos-logo" aria-label="TelePagos">
+                            <span class="telepagos-logo__tele">tele</span><span class="telepagos-logo__pagos">pagos</span>
+                          </span>
+                        } @else {
+                          {{ method.label }}
+                        }
+                      </span>
+
+                      <i class="fa-solid fa-angle-right payment-method__chevron" aria-hidden="true"></i>
+                    </label>
+                  }
+                </div>
+              </section>
+
+              <section class="payment-panel" aria-live="polite">
+                @if (selectedPaymentMethod() === 'qr') {
+                  <div class="payment-panel__card">
+                    <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
+                    <div class="payment-panel__divider"></div>
+
+                    <div class="qr-code" aria-label="QR de pago">
+                      <span class="qr-code__finder qr-code__finder--tl"></span>
+                      <span class="qr-code__finder qr-code__finder--tr"></span>
+                      <span class="qr-code__finder qr-code__finder--bl"></span>
+                    </div>
+                  </div>
+                } @else if (selectedPaymentMethod() === 'transferencia') {
+                  <div class="payment-panel__card">
+                    <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)="copyTransferValue('cvu', transferAccount.cvu)"
+                        />
+                      </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)="copyTransferValue('alias', transferAccount.alias)"
+                        />
+                      </div>
+
+                      @if (copiedTransferField() === 'alias') {
+                        <small class="payment-detail__feedback">Alias copiado</small>
+                      }
+                    </div>
+                  </div>
+                } @else {
+                  <div class="payment-panel__card">
+                    <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
+                    <div class="payment-panel__divider"></div>
+
+                    <div class="store-badges" aria-label="Tiendas disponibles">
+                      <div class="store-badge">
+                        <i class="fa-brands fa-google-play" aria-hidden="true"></i>
+                        <span class="store-badge__text">
+                          <small>Disponible en</small>
+                          <strong>Google Play</strong>
+                        </span>
+                      </div>
+
+                      <div class="store-badge">
+                        <i class="fa-brands fa-apple" aria-hidden="true"></i>
+                        <span class="store-badge__text">
+                          <small>Descargalo en</small>
+                          <strong>App Store</strong>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                }
+              </section>
             </div>
 
-            <!-- DNI -->
+            <div class="checkout-form__actions checkout-form__actions--payment">
-            <div class="form-field">
+              <app-button
-              <label class="form-field__label" for="checkout-dni">
+                type="button"
-                DNI <span class="form-field__required" aria-hidden="true">*</span>
+                variant="cancel"
-              </label>
+                hostClass="checkout-form__action-btn"
-              <app-input
+                buttonClass="w-100"
-                id="checkout-dni"
+                (click)="onCancel()"
-                type="text"
+              >
-                placeholder="Descripción"
+                Cancelar
-                [value]="form.controls.dni.value"
+              </app-button>
-                [invalid]="showControlError('dni')"
-                (valueChange)="updateField('dni', $event)"
-              />
-              @if (getControlError('dni'); as errorMessage) {
-                <small class="form-field__error">{{ errorMessage }}</small>
-              }
-            </div>
 
-            <!-- Teléfono -->
+              <app-button
-            <div class="form-field">
+                type="button"
-              <label class="form-field__label" for="checkout-telefono">
+                hostClass="checkout-form__action-btn"
-                Teléfono <span class="form-field__required" aria-hidden="true">*</span>
+                buttonClass="w-100"
-              </label>
+              >
-              <app-input
+                Finalizar compra
-                id="checkout-telefono"
+              </app-button>
-                type="text"
-                placeholder="Descripción"
-                [value]="form.controls.telefono.value"
-                [invalid]="showControlError('telefono')"
-                (valueChange)="updateField('telefono', $event)"
-              />
-              @if (getControlError('telefono'); as errorMessage) {
-                <small class="form-field__error">{{ errorMessage }}</small>
-              }
             </div>
-
           </div>
+        </app-step>
 
-          <!-- Actions -->
+      </app-stepper>
-          <div class="checkout-form__actions">
+    </div>
-            <app-button
-              type="button"
-              variant="cancel"
-              hostClass="checkout-form__action-btn"
-              buttonClass="w-100"
-              (click)="onCancel()"
-            >
-              Cancelar
-            </app-button>
-            <app-button
-              type="submit"
-              hostClass="checkout-form__action-btn"
-              buttonClass="w-100"
-            >
-              Continuar
-            </app-button>
-          </div>
 
-        </form>
+    <div class="checkout-page__cart-col">
-      </app-step>
+      <app-cart
+        [items]="mappedCartItems()"
+        [subtotal]="cartSubtotal()"
+        [discount]="cartDiscount()"
+        [total]="cartTotal()"
+        backgroundColor="transparent"
+      />
+    </div>
 
-      <!-- Step 2: Pago (placeholder) -->
-      <app-step label="Pago">
-        <div class="checkout-payment-placeholder">
-          <p>Próximamente: sección de pago.</p>
-        </div>
-      </app-step>
-
-    </app-stepper>
   </div>
-
-  <!-- Right: Cart detail -->
-  <div class="checkout-page__cart-col">
-    <app-cart
-      [items]="mappedCartItems()"
-      [subtotal]="cartSubtotal()"
-      [discount]="cartDiscount()"
-      [total]="cartTotal()"
-      backgroundColor="transparent"
-    />
-  </div>
-
-</div>
 </div>

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -1,6 +1,6 @@
 .checkout-page {
   display: grid;
-  grid-template-columns: 1fr 420px;
+  grid-template-columns: minmax(0, 1fr) 420px;
   gap: 2rem;
   align-items: start;
   padding: 2rem 0;
@@ -9,13 +9,12 @@
     grid-template-columns: 1fr;
   }
 
-  // ── Left column ──────────────────────────────────────────────────
   &__stepper-col {
+    min-width: 0;
     border-radius: 4px;
     min-height: 420px;
   }
 
-  // ── Right column ─────────────────────────────────────────────────
   &__cart-col {
     border: 1px solid #ececec;
     border-radius: 4px;
@@ -27,7 +26,6 @@
   }
 }
 
-// ── Form ────────────────────────────────────────────────────────────
 .checkout-form {
   display: flex;
   flex-direction: column;
@@ -43,6 +41,14 @@
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
     margin-top: 0.5rem;
+
+    @media (max-width: 540px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__actions--payment {
+    margin-top: 2rem;
   }
 
   &__action-btn {
@@ -51,7 +57,6 @@
   }
 }
 
-// ── Field label & error ──────────────────────────────────────────────
 .form-field {
   display: grid;
   gap: 0.35rem;
@@ -60,7 +65,6 @@
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--bs-secondary, #6c757d);
-    text-transform: none;
     letter-spacing: 0;
   }
 
@@ -75,12 +79,265 @@
   }
 }
 
-// ── Payment placeholder ──────────────────────────────────────────────
+.checkout-payment {
-.checkout-payment-placeholder {
+  display: grid;
+  gap: 1rem;
+
+  &__content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
+    gap: 2rem;
+    align-items: start;
+
+    @media (max-width: 760px) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.payment-methods {
+  min-width: 0;
+
+  &__title {
+    margin: 0 0 1.75rem;
+    color: #8f8f8f;
+    font-size: 0.95rem;
+    font-weight: 700;
+  }
+
+  &__list {
+    display: grid;
+    gap: 1.1rem;
+  }
+}
+
+.payment-method {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 0.35rem 0;
+  color: #666666;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #4f4f4f;
+  }
+
+  &.is-selected {
+    color: var(--tenant-primary, #6376f3);
+  }
+
+  &__radio {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    accent-color: var(--tenant-primary, #6376f3);
+    cursor: pointer;
+  }
+
+  &__label {
+    min-width: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+
+  &__chevron {
+    color: #9f9f9f;
+    font-size: 0.95rem;
+    opacity: 0;
+    transform: translateX(-4px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  &.is-selected &__chevron,
+  &:hover &__chevron {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.telepagos-logo {
+  display: inline-block;
+  font-size: 1.45rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  background: linear-gradient(90deg, #0a69d8 0 78%, #f6a11a 78% 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.payment-panel {
+  min-width: 0;
+
+  &__card {
+    min-height: 260px;
+    padding: 1.5rem 1.75rem;
+    border-radius: 0.5rem;
+    background: #ffffff;
+    box-shadow: 0 0 0 1px #f1f1f1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  &__title {
+    max-width: 18rem;
+    margin: 0;
+    color: #8b8b8b;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  &__divider {
+    width: 100%;
+    max-width: 220px;
+    height: 1px;
+    margin: 1.2rem 0 1.45rem;
+    background: #e7e7e7;
+  }
+
+  &__account {
+    width: 100%;
+    display: grid;
+    gap: 0.75rem;
+    color: #7a7a7a;
+  }
+
+  &__eyebrow {
+    margin: 0;
+    color: #838383;
+    font-size: 0.95rem;
+    letter-spacing: 0.06em;
+  }
+}
+
+.payment-detail {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: center;
+  gap: 0.35rem;
+  align-items: center;
+  font-size: 0.98rem;
+
+  &--copy {
+    grid-template-columns: auto auto auto;
+  }
+
+  &__label {
+    color: #8a8a8a;
+  }
+
+  &__value {
+    color: #5e5e5e;
+    font-weight: 700;
+  }
+
+  &__feedback {
+    display: block;
+    margin-top: -0.25rem;
+    color: var(--tenant-primary, #6376f3);
+    font-size: 0.78rem;
+    font-weight: 700;
+  }
+}
+
+.qr-code {
+  position: relative;
+  width: min(170px, 100%);
+  aspect-ratio: 1;
+  border: 8px solid #ffffff;
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(17, 17, 17, 0.95) 0 14%,
+      transparent 14% 28%,
+      rgba(17, 17, 17, 0.95) 28% 42%,
+      transparent 42% 56%,
+      rgba(17, 17, 17, 0.95) 56% 70%,
+      transparent 70% 84%,
+      rgba(17, 17, 17, 0.95) 84% 100%
+    ),
+    linear-gradient(
+      rgba(17, 17, 17, 0.95) 0 14%,
+      transparent 14% 28%,
+      rgba(17, 17, 17, 0.95) 28% 42%,
+      transparent 42% 56%,
+      rgba(17, 17, 17, 0.95) 56% 70%,
+      transparent 70% 84%,
+      rgba(17, 17, 17, 0.95) 84% 100%
+    );
+  background-size: 18px 18px;
+  background-position: 0 0, 9px 9px;
+}
+
+.qr-code__finder {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  border: 5px solid #111111;
+  background: #ffffff;
+  box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111;
+
+  &--tl {
+    top: 10px;
+    left: 10px;
+  }
+
+  &--tr {
+    top: 10px;
+    right: 10px;
+  }
+
+  &--bl {
+    bottom: 10px;
+    left: 10px;
+  }
+}
+
+.store-badges {
+  width: 100%;
+  max-width: 210px;
+  display: grid;
+  gap: 0.8rem;
+}
+
+.store-badge {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 0.75rem;
-  padding: 3rem 1rem;
+  padding: 0.75rem 0.95rem;
-  color: var(--bs-secondary, #6c757d);
+  border-radius: 0.85rem;
-  font-size: 0.9rem;
+  background: #111111;
+  color: #ffffff;
+  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
+
+  i {
+    font-size: 1.35rem;
+  }
+
+  &__text {
+    display: grid;
+    text-align: left;
+    line-height: 1.1;
+
+    small {
+      font-size: 0.62rem;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      opacity: 0.8;
+    }
+
+    strong {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+  }
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal, ViewChild } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
@@ -9,6 +9,10 @@ import { StepperComponent } from '../../../../shared/components/stepper/stepper.
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
+
+type PaymentMethod = 'qr' | 'transferencia' | 'telepagos';
+type TransferField = 'cvu' | 'alias';
 
 @Component({
   selector: 'app-checkout-page',
@@ -19,7 +23,8 @@ import { ButtonComponent } from '../../../../shared/components/button/button.com
     StepperComponent,
     StepComponent,
     InputComponent,
-    ButtonComponent
+    ButtonComponent,
+    IconButtonComponent
   ],
   templateUrl: './checkout-page.component.html',
   styleUrl: './checkout-page.component.scss',
@@ -55,6 +60,19 @@ export class CheckoutPageComponent {
   });
 
   protected readonly isStep1Valid = computed(() => this.form.valid);
+  protected readonly paymentMethods: ReadonlyArray<{ id: PaymentMethod; label: string }> = [
+    { id: 'qr', label: 'QR' },
+    { id: 'transferencia', label: 'Transferencia' },
+    { id: 'telepagos', label: 'TelePagos' }
+  ];
+  protected readonly selectedPaymentMethod = signal<PaymentMethod>('qr');
+  protected readonly copiedTransferField = signal<TransferField | null>(null);
+  protected readonly transferAccount = {
+    titular: 'Nombre y Apellido',
+    entidad: 'TelePagos',
+    cvu: '0000000000000000000000',
+    alias: 'telepagos.ar'
+  };
 
   private mapCartItemToMock(item: CartItem): CartItemMock {
     const fullName = item.product?.nombre ?? '';
@@ -114,4 +132,25 @@ export class CheckoutPageComponent {
   protected onCancel(): void {
     void this.router.navigate(['/']);
   }
+
+  protected selectPaymentMethod(method: PaymentMethod): void {
+    this.selectedPaymentMethod.set(method);
+  }
+
+  protected async copyTransferValue(field: TransferField, value: string): Promise<void> {
+    if (!globalThis.navigator?.clipboard?.writeText) return;
+
+    try {
+      await globalThis.navigator.clipboard.writeText(value);
+      this.copiedTransferField.set(field);
+
+      setTimeout(() => {
+        if (this.copiedTransferField() === field) {
+          this.copiedTransferField.set(null);
+        }
+      }, 1800);
+    } catch {
+      this.copiedTransferField.set(null);
+    }
+  }
 }