feat(cart-copia): implement cart showcase component for isolated cart redesign

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -454,6 +454,39 @@
           </div>
         }
       </div>
+
+      <div class="cart-showcase mt-4">
+        <div class="cart-showcase__header">
+          <div>
+            <h2>Cart copia</h2>
+            <p class="text-muted mb-0">
+              Copia aislada del carrito actual para iterar el rediseño sin tocar el componente productivo.
+            </p>
+          </div>
+
+          @if (!cartCopiaVisible) {
+            <app-button variant="secondary" (click)="showCartCopia()">
+              Volver a mostrar cart copia
+            </app-button>
+          }
+        </div>
+
+        @if (cartCopiaVisible) {
+          <div class="cart-showcase__viewport">
+            <app-cart-copia
+              [showClose]="true"
+              [items]="cartMockItems"
+              [subtotal]="366000"
+              [discount]="66000"
+              [total]="300000"
+              [backgroundColor]="cartBackgroundColor"
+              (secondaryAction)="hideCartCopia()"
+              (primaryAction)="triggerCartCopiaCheckout()"
+              (closed)="hideCartCopia()"
+            ></app-cart-copia>
+          </div>
+        }
+      </div>
     </div>
   </section>
 

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -113,8 +113,8 @@ h1 {
 
 .cart-showcase__viewport {
   width: 100%;
-  max-width: 370px;
-  height: 360px;
+  max-width: 504px;
+  height: 640px;
 }
 
 .cart-showcase__header {

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -4,6 +4,7 @@ import {
   CartComponent,
   CartItemMock
 } from '../../../../shared/components/cart/cart.component';
+import { CartCopiaComponent } from '../../../../shared/components/cart-copia/cart-copia.component';
 import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
@@ -21,6 +22,7 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
   imports: [
     ButtonComponent,
     CartComponent,
+    CartCopiaComponent,
     InputComponent,
     PaginatorComponent,
     ProductCardComponent,
@@ -58,6 +60,7 @@ export class ReutilizablesTestPageComponent {
   protected editableDisabled = true;
   protected currentPage = 1;
   protected cartVisible = true;
+  protected cartCopiaVisible = true;
   protected lastModalResult = 'Todavia no se abrio ningun modal.';
   protected readonly paginatorTotalPages = 8;
   protected readonly cartBackgroundColor = '#ffffff';
@@ -160,6 +163,19 @@ export class ReutilizablesTestPageComponent {
     this.toastService.info('Se disparo el evento de cerrado del carrito mock.');
   }
 
+  protected showCartCopia(): void {
+    this.cartCopiaVisible = true;
+  }
+
+  protected hideCartCopia(): void {
+    this.cartCopiaVisible = false;
+    this.toastService.info('Se disparo el evento de cerrado del cart-copia mock.');
+  }
+
+  protected triggerCartCopiaCheckout(): void {
+    this.toastService.success('Se disparo la accion de compra del cart-copia mock.');
+  }
+
   protected triggerToast(type: 'success' | 'danger' | 'info'): void {
     if (type === 'success') {
       this.toastService.success(