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

feat(product-carousel): enhance image loading with optimized attributes and improve layout consistency
style: refactor HTML structure for better readability and maintainability
test(product-detail): add unit tests for product detail resolver and component behavior

package-lock.json

@@ -19,6 +19,7 @@
         "@fortawesome/fontawesome-free": "^7.2.0",
         "bootstrap": "^5.3.8",
         "express": "^5.1.0",
+        "qrcode": "1.5.4",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
       },
@@ -4394,6 +4395,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001799",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
@@ -4578,6 +4588,24 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
@@ -4759,6 +4787,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
@@ -4786,6 +4823,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -5237,6 +5280,19 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -5306,7 +5362,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -5927,6 +5982,18 @@
         "@lmdb/lmdb-win32-x64": "3.5.4"
       }
     },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/log-symbols": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-7.0.1.tgz",
@@ -6703,6 +6770,33 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/p-map": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
@@ -6716,6 +6810,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pacote": {
       "version": "21.5.1",
       "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.5.1.tgz",
@@ -6824,6 +6927,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -6921,6 +7033,15 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -7033,6 +7154,154 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.15.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
@@ -7093,6 +7362,15 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -7103,6 +7381,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/restore-cursor": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
@@ -7325,6 +7609,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -8690,6 +8980,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@fortawesome/fontawesome-free": "^7.2.0",
     "bootstrap": "^5.3.8",
     "express": "^5.1.0",
+    "qrcode": "1.5.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

src/app/app.config.ts

@@ -1,17 +1,36 @@
-import { provideHttpClient, withFetch } from '@angular/common/http';
-import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { HttpRequest, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import {
+  ApplicationConfig,
+  provideAppInitializer,
+  provideBrowserGlobalErrorListeners,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { provideClientHydration } from '@angular/platform-browser';
+import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
 
 import { routes } from './app.routes';
+import { authBootstrap } from './core/services/auth/auth-bootstrap';
+import { authInterceptor } from './core/services/auth/auth.interceptor';
 import { tenantBootstrap } from './core/services/tenant-bootstrap';
 
+function isStoreCatalogRequest(request: HttpRequest<unknown>): boolean {
+  return (
+    request.method === 'GET' &&
+    /\/api\/tenants\/[^/]+\/productos(?:\/\d+)?(?:\?|$)/.test(request.urlWithParams)
+  );
+}
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes),
-    provideClientHydration(),
-    provideHttpClient(withFetch()),
-    provideAppInitializer(tenantBootstrap)
-  ]
+    provideClientHydration(
+      withHttpTransferCacheOptions({
+        includeRequestsWithAuthHeaders: true,
+        filter: isStoreCatalogRequest,
+      }),
+    ),
+    provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
+    provideAppInitializer(authBootstrap),
+    provideAppInitializer(tenantBootstrap),
+  ],
 };

src/app/app.routes.spec.ts

@@ -1,14 +1,15 @@
-import { signal } from '@angular/core';
+import { computed, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { provideRouter, Router } from '@angular/router';
 
 import { of } from 'rxjs';
 
 import { App } from './app';
-import { routes } from './app.routes';
+import { AuthService } from './core/services/auth/auth.service';
+import { CartService } from './core/services/cart/cart.service';
 import { Tenant } from './core/services/tenant.interface';
 import { TenantService } from './core/services/tenant.service';
-import { CartService } from './core/services/cart/cart.service';
+import { routes } from './app.routes';
 
 const tenant: Tenant = {
   id: 1,
@@ -47,9 +48,33 @@ function createTenantServiceStub(
   };
 }
 
+function createAuthServiceStub(isAuthenticated = false) {
+  const tokenState = signal<string | null>(isAuthenticated ? 'test-token' : null);
+  const userState = signal(
+    isAuthenticated ? { id: 1, nombre_apellido: 'Ada Lovelace', email: 'ada@example.com' } : null
+  );
+
+  return {
+    user: userState.asReadonly(),
+    token: tokenState.asReadonly(),
+    isAuthenticated: computed(() => tokenState() !== null),
+    login: vi.fn(),
+    register: vi.fn(),
+    logout: vi.fn(),
+    loadCurrentUser: vi.fn(),
+    hydrateSession: vi.fn(),
+    bootstrap: vi.fn().mockResolvedValue(undefined),
+    clearSession: vi.fn(() => {
+      userState.set(null);
+      tokenState.set(null);
+    })
+  };
+}
+
 async function renderAppAt(
   url: string,
-  tenantService: ReturnType<typeof createTenantServiceStub> = createTenantServiceStub()
+  tenantService: ReturnType<typeof createTenantServiceStub> = createTenantServiceStub(),
+  authService: ReturnType<typeof createAuthServiceStub> = createAuthServiceStub()
 ) {
   TestBed.resetTestingModule();
 
@@ -67,6 +92,10 @@ async function renderAppAt(
           cart: signal(null).asReadonly(),
           loadCart: () => of({ id: 1, items: [], subtotal: '0' })
         }
+      },
+      {
+        provide: AuthService,
+        useValue: authService
       }
     ]
   }).compileComponents();
@@ -106,14 +135,63 @@ describe('app routes', () => {
     expect(compiled.textContent).toContain('Componentes reutilizables');
   });
 
+  it('loads the login page at /login and shows the create account CTA', async () => {
+    const { fixture, router } = await renderAppAt('/login');
+    const compiled = fixture.nativeElement as HTMLElement;
+
+    expect(router.url).toBe('/login');
+    expect(compiled.querySelector('app-login-page')).not.toBeNull();
+    expect(compiled.textContent).toContain('Iniciar sesion');
+    expect(compiled.textContent).toContain('Crear cuenta');
+  });
+
+  it('loads the register page at /register and renders the shared auth fields', async () => {
+    const { fixture, router } = await renderAppAt('/register');
+    const compiled = fixture.nativeElement as HTMLElement;
+    const registerPage = compiled.querySelector('app-register-page');
+    const placeholders = Array.from(registerPage?.querySelectorAll('input') ?? []).map((input) =>
+      input.getAttribute('placeholder')
+    );
+
+    expect(router.url).toBe('/register');
+    expect(registerPage).not.toBeNull();
+    expect(compiled.textContent).toContain('CREAR CUENTA');
+    expect(compiled.textContent).toContain('Volver');
+    expect(placeholders).toEqual([
+      'Nombre y Apellido',
+      'Email',
+      'Contraseña',
+      'Repetir Contraseña'
+    ]);
+  });
+
+  it('redirects authenticated users away from /login', async () => {
+    const { router } = await renderAppAt('/login', createTenantServiceStub(), createAuthServiceStub(true));
+
+    expect(router.url).toBe('/');
+  });
+
   it('renders the tenant not found screen for any route when the tenant is missing', async () => {
     const { fixture } = await renderAppAt(
       '/componentes-test/reutilizables',
-      createTenantServiceStub('not-found', null)
+      createTenantServiceStub('not-found', null),
+      createAuthServiceStub()
     );
     const compiled = fixture.nativeElement as HTMLElement;
 
     expect(compiled.querySelector('.tenant-status')).not.toBeNull();
     expect(compiled.textContent).toContain('No encontramos una tienda para este dominio');
   });
+
+  it('redirects unauthenticated users from /checkout to /login', async () => {
+    const { router } = await renderAppAt('/checkout', createTenantServiceStub(), createAuthServiceStub(false));
+
+    expect(router.url).toBe('/login');
+  });
+
+  it('allows authenticated users to access /checkout', async () => {
+    const { router } = await renderAppAt('/checkout', createTenantServiceStub(), createAuthServiceStub(true));
+
+    expect(router.url).toBe('/checkout');
+  });
 });

src/app/app.ts

@@ -31,12 +31,22 @@ function hexToRgb(hex: string): string {
     '[style.--tenant-secondary]': 'tenantSecondaryColor()',
     '[style.--tenant-danger]': 'tenantDangerColor()',
     '[style.--tenant-success]': 'tenantSuccessColor()',
+    '[style.--color-primary]': 'tenantPrimaryColor()',
+    '[style.--color-secondary]': 'tenantSecondaryColor()',
+    '[style.--color-danger]': 'tenantDangerColor()',
+    '[style.--color-success]': 'tenantSuccessColor()',
     '[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
     '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
     '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
     '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
+    '[style.--color-primary-rgb]': 'tenantPrimaryColorRgb()',
+    '[style.--color-secondary-rgb]': 'tenantSecondaryColorRgb()',
+    '[style.--color-danger-rgb]': 'tenantDangerColorRgb()',
+    '[style.--color-success-rgb]': 'tenantSuccessColorRgb()',
     '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
-    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
+    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()',
+    '[style.--color-header-bg]': 'tenantHeaderBgColor()',
+    '[style.--color-footer-bg]': 'tenantFooterBgColor()'
   }
 })
 export class App {
@@ -78,5 +88,4 @@ export class App {
       this.tenantService.tenant()?.footer_bg_color ??
       DEFAULT_TENANT_BRANDING.footerBgColor
   );
-}
-
+}

src/app/core/guards/menu.guard.ts

@@ -0,0 +1,24 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { TenantService } from '../services/tenant.service';
+
+export const hasMenuGuard = (menuCode: string): CanActivateFn => {
+  return () => {
+    const tenantService = inject(TenantService);
+    const router = inject(Router);
+
+    const tenant = tenantService.tenant();
+
+    if (!tenant) {
+      return router.createUrlTree(['/']);
+    }
+
+    const hasMenu = tenant.menues?.some(menu => menu.code === menuCode) ?? false;
+
+    if (hasMenu) {
+      return true;
+    }
+
+    return router.createUrlTree(['/']);
+  };
+};

src/app/core/layout/simple-layout/simple-layout.component.html

@@ -0,0 +1,13 @@
+<section class="simple-layout">
+  <div class="simple-layout__container container-xl">
+    <div class="simple-layout__row row justify-content-center">
+      <div class="simple-layout__column col-12 col-md-9 col-lg-7 col-xl-5">
+        <article class="simple-layout__card card border-0 shadow-lg">
+          <div class="simple-layout__body card-body">
+            <router-outlet />
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>

src/app/core/layout/simple-layout/simple-layout.component.scss

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+}
+
+.simple-layout {
+  padding: 1.5rem 0 2rem;
+}
+
+.simple-layout__container {
+  padding-inline: 1rem;
+}
+
+.simple-layout__row {
+  padding-block: 1rem;
+}
+
+.simple-layout__card {
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.simple-layout__body {
+  padding: 2rem 1.5rem;
+}
+
+:host ::ng-deep .auth-title {
+  margin: 0;
+  color: #666666;
+  font-size: 17px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+@media (min-width: 768px) {
+  .simple-layout {
+    padding: 3rem 0;
+  }
+
+  .simple-layout__container {
+    padding-inline: 1.5rem;
+  }
+
+  .simple-layout__row {
+    padding-block: 1.5rem;
+  }
+
+  .simple-layout__body {
+    padding: 3rem;
+  }
+}

src/app/core/layout/simple-layout/simple-layout.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-simple-layout',
+  imports: [RouterOutlet],
+  templateUrl: './simple-layout.component.html',
+  styleUrl: './simple-layout.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SimpleLayoutComponent {}

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -1,8 +1,9 @@
 <header class="store-layout__header">
   <div class="store-layout__header-main">
     <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-row flex-wrap align-items-center justify-content-between gap-3">
-      <div
-        class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
+      <a
+        routerLink="/"
+        class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0 text-decoration-none"
         data-testid="store-header-brand-slot"
         aria-label="Logo del comercio"
       >
@@ -13,16 +14,15 @@
             <span class="store-layout__brand-logo-skeleton"></span>
           </div>
         }
-      </div>
+      </a>
 
-      <div class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap w-100 justify-content-between justify-content-md-end">
-        <div class="input-group store-layout__search flex-grow-1" role="search">
+      <div class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap flex-grow-1 justify-content-between justify-content-md-end">
+        <div class="input-group store-layout__search" role="search">
           <label class="visually-hidden" for="store-search-input">Buscar productos</label>
           <input
             id="store-search-input"
             type="search"
             class="form-control store-layout__search-input border-end-0 rounded-start"
-            placeholder="Buscar productos"
           />
           <button
             type="button"
@@ -40,11 +40,24 @@
             title="Carrito"
             (click)="cartClick.emit()"
           />
-          <app-icon-button
-            variant="user"
-            ariaLabel="Mi cuenta"
-            title="Mi cuenta"
-          />
+          <div class="store-layout__user-menu">
+            <app-icon-button
+              variant="user"
+              ariaLabel="Mi cuenta"
+              ariaControls="store-user-dropdown"
+              [ariaExpanded]="isUserDropdownOpen()"
+              title="Mi cuenta"
+              (clicked)="toggleUserDropdown()"
+            />
+
+            @if (isUserDropdownOpen()) {
+              <app-user-dropdown
+                id="store-user-dropdown"
+                [user]="user()"
+                (logoutClick)="onLogoutClick()"
+              />
+            }
+          </div>
         </div>
       </div>
     </div>

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -41,7 +41,7 @@
 }
 
 .store-layout__search {
-  width: min(100%, 24rem);
+  width: min(100%, 260px);
   min-width: 0;
 }
 
@@ -56,8 +56,9 @@
 }
 
 .store-layout__search-input:focus {
-  border-color: var(--tenant-primary);
-  box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
+  border-color: #cccccc;
+  box-shadow: none;
+  outline: none;
 }
 
 .store-layout__search-button {
@@ -82,6 +83,11 @@
   color: #8a8a8a;
 }
 
+.store-layout__user-menu {
+  position: relative;
+  display: inline-flex;
+}
+
 .store-layout__category-trigger {
   font-size: 0.8rem;
   letter-spacing: 0.02em;

src/app/core/layout/store-layout/store-header/store-header.component.ts

@@ -1,15 +1,62 @@
-import { Component, input, output } from '@angular/core';
+import { Component, ElementRef, HostListener, inject, input, output, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { AuthUser } from '../../../services/auth/auth.interfaces';
 import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
+import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
 
 @Component({
   selector: 'app-store-header',
-  imports: [CartIconComponent, IconButtonComponent],
+  imports: [CartIconComponent, IconButtonComponent, RouterLink, UserDropdownComponent],
   templateUrl: './store-header.component.html',
   styleUrl: './store-header.component.scss'
 })
 export class StoreHeaderComponent {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
   readonly logoUrl = input<string | null>(null);
   readonly cartQuantity = input<number>(0);
+  readonly user = input<AuthUser | null>(null);
+  readonly isAuthenticated = input<boolean>(false);
   readonly cartClick = output<void>();
+  readonly loginClick = output<void>();
+  readonly logoutClick = output<void>();
+
+  protected readonly isUserDropdownOpen = signal(false);
+
+  @HostListener('document:click', ['$event'])
+  protected onDocumentClick(event: MouseEvent): void {
+    if (!this.isUserDropdownOpen()) {
+      return;
+    }
+
+    const target = event.target;
+    if (target instanceof Node && !this.elementRef.nativeElement.contains(target)) {
+      this.isUserDropdownOpen.set(false);
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  protected onEscapeKey(): void {
+    this.isUserDropdownOpen.set(false);
+  }
+
+  protected toggleUserDropdown(): void {
+    if (!this.isAuthenticated()) {
+      this.loginClick.emit();
+      return;
+    }
+
+    this.isUserDropdownOpen.update((isOpen) => !isOpen);
+  }
+
+  protected onLoginClick(): void {
+    this.isUserDropdownOpen.set(false);
+    this.loginClick.emit();
+  }
+
+  protected onLogoutClick(): void {
+    this.isUserDropdownOpen.set(false);
+    this.logoutClick.emit();
+  }
 }

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.html

@@ -0,0 +1,23 @@
+<section class="user-dropdown" role="menu" aria-label="Menu de usuario">
+  <div class="user-dropdown__profile">
+    <span class="user-dropdown__name">{{ displayName() }}</span>
+  </div>
+
+  <div class="user-dropdown__divider"></div>
+
+  <a routerLink="/mi-cuenta/datos-personales" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
+    Mi cuenta
+  </a>
+  <a routerLink="/mi-cuenta/compras" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
+    Mis compras
+  </a>
+  <button
+    type="button"
+    class="user-dropdown__item"
+    role="menuitem"
+    data-testid="user-dropdown-logout"
+    (click)="logoutClick.emit()"
+  >
+    Cerrar sesion
+  </button>
+</section>

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss

@@ -0,0 +1,76 @@
+:host {
+  position: absolute;
+  top: calc(100% + 0.75rem);
+  right: 0;
+  z-index: 1060;
+  display: block;
+  width: min(18rem, calc(100vw - 2rem));
+}
+
+.user-dropdown {
+  display: grid;
+  background: #ffffff;
+  border: 1px solid rgba(32, 32, 32, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
+  padding: 0.75rem;
+  animation: user-dropdown-enter 0.16s ease-out;
+}
+
+.user-dropdown__profile {
+  padding: 0.25rem;
+}
+
+.user-dropdown__name {
+  color: #a0a0a0;
+  font-size: 13px;
+  font-weight: 325;
+  line-height: 1.2;
+}
+
+.user-dropdown__divider {
+  height: 1px;
+  margin: 0.6rem 0;
+  background: rgba(32, 32, 32, 0.08);
+}
+
+.user-dropdown__item {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-radius: 6px;
+  padding: 0.65rem 0.6rem;
+  color: #8a8a8a;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  text-decoration: none;
+}
+
+.user-dropdown__item:active,
+.user-dropdown__item:hover,
+.user-dropdown__item:focus-visible {
+  color: var(--tenant-primary);
+  outline: none;
+}
+
+@keyframes user-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.35rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 575.98px) {
+  :host {
+    right: -0.5rem;
+  }
+}

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.ts

@@ -0,0 +1,17 @@
+import { Component, computed, input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { AuthUser } from '../../../../services/auth/auth.interfaces';
+
+@Component({
+  selector: 'app-user-dropdown',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './user-dropdown.component.html',
+  styleUrl: './user-dropdown.component.scss'
+})
+export class UserDropdownComponent {
+  readonly user = input<AuthUser | null>(null);
+  readonly logoutClick = output<void>();
+
+  protected readonly displayName = computed(() => this.user()?.nombre_apellido || 'Mi cuenta');
+}

src/app/core/layout/store-layout/store-layout.component.html

@@ -2,7 +2,11 @@
   <app-store-header
     [cartQuantity]="cartQuantity()"
     [logoUrl]="tenant()?.header_logo ?? null"
+    [user]="user()"
+    [isAuthenticated]="isAuthenticated()"
     (cartClick)="isCartOpen.set(!isCartOpen())"
+    (loginClick)="onLoginClick()"
+    (logoutClick)="onLogoutClick()"
   />
 
   @if (isCartOpen()) {
@@ -17,14 +21,18 @@
         [backgroundColor]="'#ffffff'"
         (closed)="isCartOpen.set(false)"
       >
-        <app-button variant="secondary" class="flex-grow-1">Seguir comprando</app-button>
-        <app-button variant="primary" class="flex-grow-1">Comprar</app-button>
+        <app-button variant="secondary" class="flex-grow-1" (click)="isCartOpen.set(false)">Seguir comprando</app-button>
+        <app-button variant="primary" class="flex-grow-1" (click)="onCheckoutClick()">Comprar</app-button>
       </app-cart>
     </div>
   }
 
   <main class="flex-grow-1 d-block">
-    <router-outlet />
+    <section class="py-5">
+      <div class="container-xl px-3 px-md-4">
+        <router-outlet />
+      </div>
+    </section>
   </main>
 
   <app-store-footer

src/app/core/layout/store-layout/store-layout.component.scss

@@ -1,13 +1,7 @@
 :host {
   display: flex;
   min-height: 100dvh;
-  background:
-    radial-gradient(
-      circle at top,
-      color-mix(in srgb, white 88%, var(--tenant-primary)) 0%,
-      transparent 58%
-    ),
-    #f6f6f6;
+  background: #f5f5f5;
   color: #202020;
 }
 
@@ -30,7 +24,6 @@
   top: 76px;
   right: calc((100% - 1320px) / 2 + 1.5rem);
  
-  height: 520px;
   max-height: calc(100vh - 120px);
   z-index: 1050;
   background-color: #ffffff;

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -1,6 +1,7 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
 
 import { of } from 'rxjs';
 
@@ -8,6 +9,8 @@ import { Tenant } from '../../services/tenant.interface';
 import { TenantService } from '../../services/tenant.service';
 import { CartService } from '../../services/cart/cart.service';
 import { ToastService } from '../../services/toast.service';
+import { AuthService } from '../../services/auth/auth.service';
+import { AuthUser } from '../../services/auth/auth.interfaces';
 import { StoreLayoutComponent } from './store-layout.component';
 
 const tenant: Tenant = {
@@ -28,6 +31,8 @@ const tenant: Tenant = {
 describe('StoreLayoutComponent', () => {
   beforeEach(async () => {
     const tenantState = signal(tenant);
+    const authUserState = signal<AuthUser | null>(null);
+    const isAuthenticatedState = signal(false);
 
     await TestBed.configureTestingModule({
       imports: [StoreLayoutComponent],
@@ -60,6 +65,14 @@ describe('StoreLayoutComponent', () => {
             success: vi.fn(),
             dismiss: vi.fn()
           }
+        },
+        {
+          provide: AuthService,
+          useValue: {
+            user: authUserState,
+            isAuthenticated: isAuthenticatedState,
+            logout: vi.fn().mockReturnValue(of(void 0))
+          }
         }
       ]
     }).compileComponents();
@@ -98,4 +111,101 @@ describe('StoreLayoutComponent', () => {
     expect(compiled.querySelector('.fa-facebook')).not.toBeNull();
     expect(compiled.querySelector('.fa-linkedin-in')).not.toBeNull();
   });
+
+  it('redirects to /login when user icon is clicked and user is not logged in', () => {
+    const authService = TestBed.inject(AuthService);
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+
+    (authService.isAuthenticated as any).set(false);
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const userButton = compiled.querySelector('app-icon-button[variant="user"] button') as HTMLButtonElement;
+    expect(userButton).not.toBeNull();
+    userButton.click();
+    fixture.detectChanges();
+
+    expect(compiled.querySelector('app-user-dropdown')).toBeNull();
+    expect(router.navigate).toHaveBeenCalledWith(['/login']);
+  });
+
+  it('opens authenticated user dropdown without redirecting on icon click', () => {
+    const authService = TestBed.inject(AuthService);
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+
+    (authService.isAuthenticated as any).set(true);
+    (authService.user as any).set({
+      id: 1,
+      nombre_apellido: 'Ada Lovelace',
+      email: 'ada@example.com'
+    });
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const userButton = compiled.querySelector('app-icon-button[variant="user"] button') as HTMLButtonElement;
+    expect(userButton).not.toBeNull();
+    userButton.click();
+    fixture.detectChanges();
+
+    expect(compiled.querySelector('app-user-dropdown')).not.toBeNull();
+    expect(compiled.textContent).toContain('Ada Lovelace');
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+
+  it('logs out from the authenticated user dropdown', () => {
+    const authService = TestBed.inject(AuthService);
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+
+    (authService.isAuthenticated as any).set(true);
+    (authService.user as any).set({
+      id: 1,
+      nombre_apellido: 'Ada Lovelace',
+      email: 'ada@example.com'
+    });
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const userButton = compiled.querySelector('app-icon-button[variant="user"] button') as HTMLButtonElement;
+    userButton.click();
+    fixture.detectChanges();
+
+    const logoutButton = compiled.querySelector('[data-testid="user-dropdown-logout"]') as HTMLButtonElement;
+    expect(logoutButton).not.toBeNull();
+    logoutButton.click();
+    fixture.detectChanges();
+
+    expect(authService.logout).toHaveBeenCalled();
+    expect(router.navigate).toHaveBeenCalledWith(['/login']);
+  });
+
+  it('redirects to /checkout when cart buy button is clicked', () => {
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+
+    const fixture = TestBed.createComponent(StoreLayoutComponent);
+    fixture.detectChanges();
+
+    (fixture.componentInstance as any).isCartOpen.set(true);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const buyButton = Array.from(compiled.querySelectorAll('app-button button'))
+      .find((button) => button.textContent?.trim() === 'Comprar') as HTMLButtonElement | undefined;
+
+    expect(buyButton).toBeDefined();
+    buyButton!.click();
+    fixture.detectChanges();
+
+    expect(router.navigate).toHaveBeenCalledWith(['/checkout']);
+    expect((fixture.componentInstance as any).isCartOpen()).toBe(false);
+  });
 });

src/app/core/layout/store-layout/store-layout.component.ts

@@ -1,22 +1,35 @@
 import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { TenantService } from '../../services/tenant.service';
 import { CartService } from '../../services/cart/cart.service';
-import { StoreFooterComponent, StoreFooterSection, StoreSocialLink } from './store-footer/store-footer.component';
+import {
+  StoreFooterComponent,
+  StoreFooterSection,
+  StoreSocialLink,
+} from './store-footer/store-footer.component';
 import { StoreHeaderComponent } from './store-header/store-header.component';
 import { CartComponent, CartItemMock } from '../../../shared/components/cart/cart.component';
 import { ButtonComponent } from '../../../shared/components/button/button.component';
 import { CartItem } from '../../services/cart/cart.interface';
+import { AuthService } from '../../services/auth/auth.service';
 
 @Component({
   selector: 'app-store-layout',
-  imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent, CartComponent, ButtonComponent],
+  imports: [
+    RouterOutlet,
+    StoreHeaderComponent,
+    StoreFooterComponent,
+    CartComponent,
+    ButtonComponent,
+  ],
   templateUrl: './store-layout.component.html',
-  styleUrl: './store-layout.component.scss'
+  styleUrl: './store-layout.component.scss',
 })
 export class StoreLayoutComponent implements OnInit {
   private readonly tenantService = inject(TenantService);
   private readonly cartService = inject(CartService);
+  private readonly authService = inject(AuthService);
+  private readonly router = inject(Router);
 
   protected readonly isCartOpen = signal(false);
 
@@ -54,19 +67,21 @@ export class StoreLayoutComponent implements OnInit {
     }
 
     return {
-      productVariantId: item.product_variant_id,
+      cartItemId: item.id,
       imageUrl: item.product?.imagen ?? null,
       product,
       originalPrice: null,
       discountedPrice: parseFloat(item.precio_unitario),
       discountPercentage: null,
       attributes,
-      quantity: item.cantidad
+      quantity: item.cantidad,
     };
   }
 
   protected readonly currentYear = new Date().getFullYear();
   protected readonly tenant = this.tenantService.tenant;
+  protected readonly user = this.authService.user;
+  protected readonly isAuthenticated = this.authService.isAuthenticated;
 
   protected readonly cartQuantity = computed(() => {
     const cart = this.cartService.cart();
@@ -76,38 +91,53 @@ export class StoreLayoutComponent implements OnInit {
 
   ngOnInit(): void {
     this.cartService.loadCart().subscribe({
-      error: (err) => console.error('Error loading cart', err)
+      error: (err) => console.error('Error loading cart', err),
     });
   }
 
+  protected onLoginClick(): void {
+    void this.router.navigate(['/login']);
+  }
+
+  protected onLogoutClick(): void {
+    this.authService.logout().subscribe({
+      next: () => void this.router.navigate(['/login']),
+      error: (err) => console.error('Error logging out', err),
+    });
+  }
+
+  protected onCheckoutClick(): void {
+    this.isCartOpen.set(false);
+    void this.router.navigate(['/checkout']);
+  }
 
   protected readonly footerSections: StoreFooterSection[] = [
     {
       heading: 'Cuenta',
-      links: ['Mi cuenta', 'Mis compras', 'Cerrar sesion']
+      links: ['Mi cuenta', 'Mis compras', 'Cerrar sesion'],
     },
     {
       heading: 'Ayuda',
-      links: ['Contacto', 'Ayuda', 'Preguntas frecuentes']
-    }
+      links: ['Contacto', 'Ayuda', 'Preguntas frecuentes'],
+    },
   ];
 
   protected readonly socialLinks: StoreSocialLink[] = [
     {
       label: 'Instagram',
-      iconClass: 'fa-brands fa-instagram'
+      iconClass: 'fa-brands fa-instagram',
     },
     {
       label: 'WhatsApp',
-      iconClass: 'fa-brands fa-whatsapp'
+      iconClass: 'fa-brands fa-whatsapp',
     },
     {
       label: 'Facebook',
-      iconClass: 'fa-brands fa-facebook'
+      iconClass: 'fa-brands fa-facebook',
     },
     {
       label: 'LinkedIn',
-      iconClass: 'fa-brands fa-linkedin-in'
-    }
+      iconClass: 'fa-brands fa-linkedin-in',
+    },
   ];
 }

src/app/core/services/auth/auth-bootstrap.ts

@@ -0,0 +1,9 @@
+import { inject } from '@angular/core';
+
+import { AuthService } from './auth.service';
+
+export function authBootstrap(): Promise<void> {
+  const authService = inject(AuthService);
+
+  return authService.bootstrap();
+}

src/app/core/services/auth/auth.guards.spec.ts

@@ -0,0 +1,62 @@
+import { computed, signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideRouter, Router, UrlTree } from '@angular/router';
+
+import { AuthService } from './auth.service';
+import { authGuard, guestOnlyGuard } from './auth.guards';
+
+function createAuthServiceStub(isAuthenticated = false) {
+  const tokenState = signal<string | null>(isAuthenticated ? 'jwt-token' : null);
+
+  return {
+    isAuthenticated: computed(() => tokenState() !== null)
+  };
+}
+
+describe('auth guards', () => {
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('redirects unauthenticated users to /login', () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub() }]
+    });
+
+    const result = TestBed.runInInjectionContext(() => authGuard(null as never, null as never));
+
+    expect(result instanceof UrlTree).toBe(true);
+    expect(TestBed.inject(Router).serializeUrl(result as UrlTree)).toBe('/login');
+  });
+
+  it('allows authenticated users through authGuard', () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub(true) }]
+    });
+
+    const result = TestBed.runInInjectionContext(() => authGuard(null as never, null as never));
+
+    expect(result).toBe(true);
+  });
+
+  it('redirects authenticated users away from guest routes', () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub(true) }]
+    });
+
+    const result = TestBed.runInInjectionContext(() => guestOnlyGuard(null as never, null as never));
+
+    expect(result instanceof UrlTree).toBe(true);
+    expect(TestBed.inject(Router).serializeUrl(result as UrlTree)).toBe('/');
+  });
+
+  it('allows guests into login/register routes', () => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter([]), { provide: AuthService, useValue: createAuthServiceStub() }]
+    });
+
+    const result = TestBed.runInInjectionContext(() => guestOnlyGuard(null as never, null as never));
+
+    expect(result).toBe(true);
+  });
+});

src/app/core/services/auth/auth.guards.ts

@@ -0,0 +1,18 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+
+import { AuthService } from './auth.service';
+
+export const authGuard: CanActivateFn = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  return authService.isAuthenticated() ? true : router.createUrlTree(['/login']);
+};
+
+export const guestOnlyGuard: CanActivateFn = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  return authService.isAuthenticated() ? router.createUrlTree(['/']) : true;
+};

src/app/core/services/auth/auth.interceptor.spec.ts

@@ -0,0 +1,96 @@
+import { HttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { computed, signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { environment } from '../../../../environments/environment';
+import { AuthService } from './auth.service';
+import { authInterceptor } from './auth.interceptor';
+
+function createAuthServiceStub(token: string | null = null) {
+  const tokenState = signal(token);
+
+  return {
+    token: tokenState.asReadonly(),
+    isAuthenticated: computed(() => tokenState() !== null),
+    clearSession: vi.fn(() => tokenState.set(null))
+  };
+}
+
+describe('authInterceptor', () => {
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('adds the bearer token when a session exists', () => {
+    const authService = createAuthServiceStub('jwt-token');
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(withInterceptors([authInterceptor])),
+        provideHttpClientTesting(),
+        { provide: AuthService, useValue: authService }
+      ]
+    });
+
+    const client = TestBed.inject(HttpClient);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    client.get(`${environment.url}me`).subscribe();
+
+    const request = httpController.expectOne(`${environment.url}me`);
+    expect(request.request.headers.get('Authorization')).toBe('Bearer jwt-token');
+    request.flush({ id: 1 });
+
+    httpController.verify();
+  });
+
+  it('does not add the authorization header when no token exists', () => {
+    const authService = createAuthServiceStub();
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(withInterceptors([authInterceptor])),
+        provideHttpClientTesting(),
+        { provide: AuthService, useValue: authService }
+      ]
+    });
+
+    const client = TestBed.inject(HttpClient);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    client.get(`${environment.url}productos`).subscribe();
+
+    const request = httpController.expectOne(`${environment.url}productos`);
+    expect(request.request.headers.has('Authorization')).toBe(false);
+    request.flush([]);
+
+    httpController.verify();
+  });
+
+  it('clears the local session when an authenticated request returns 401', () => {
+    const authService = createAuthServiceStub('expired-token');
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(withInterceptors([authInterceptor])),
+        provideHttpClientTesting(),
+        { provide: AuthService, useValue: authService }
+      ]
+    });
+
+    const client = TestBed.inject(HttpClient);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    client.get(`${environment.url}me`).subscribe({
+      error: () => undefined
+    });
+
+    const request = httpController.expectOne(`${environment.url}me`);
+    request.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
+
+    expect(authService.clearSession).toHaveBeenCalledTimes(1);
+    httpController.verify();
+  });
+});

src/app/core/services/auth/auth.interceptor.ts

@@ -0,0 +1,37 @@
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandlerFn,
+  HttpInterceptorFn,
+  HttpRequest
+} from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Observable, catchError, throwError } from 'rxjs';
+
+import { AuthService } from './auth.service';
+
+export const authInterceptor: HttpInterceptorFn = (
+  request: HttpRequest<unknown>,
+  next: HttpHandlerFn
+): Observable<HttpEvent<unknown>> => {
+  const authService = inject(AuthService);
+  const token = authService.token();
+
+  const authenticatedRequest = token
+    ? request.clone({
+        setHeaders: {
+          Authorization: `Bearer ${token}`
+        }
+      })
+    : request;
+
+  return next(authenticatedRequest).pipe(
+    catchError((error: unknown) => {
+      if (error instanceof HttpErrorResponse && error.status === 401 && token) {
+        authService.clearSession();
+      }
+
+      return throwError(() => error);
+    })
+  );
+};

src/app/core/services/auth/auth.interfaces.ts

@@ -0,0 +1,39 @@
+export interface AuthUser {
+  id: number;
+  nombre_apellido: string;
+  email: string;
+  dni?: string;
+  telefono?: string;
+}
+
+export interface LoginPayload {
+  email: string;
+  password: string;
+}
+
+export interface RegisterPayload {
+  nombre_apellido: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+}
+
+export interface UpdateProfilePayload {
+  nombre_apellido: string;
+  email: string;
+  dni?: string;
+  telefono?: string;
+  password?: string;
+}
+
+export interface LoginResponse {
+  message: string;
+  token: string;
+  token_type: 'Bearer';
+  user: AuthUser;
+}
+
+export interface RegisterResponse {
+  message: string;
+  data: AuthUser;
+}

src/app/core/services/auth/auth.service.spec.ts

@@ -0,0 +1,211 @@
+import { PLATFORM_ID, TransferState } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+
+import { environment } from '../../../../environments/environment';
+import { AuthService } from './auth.service';
+import { CookieService } from '../cookie/cookie.service';
+
+describe('AuthService', () => {
+  let cookieStore: Record<string, string> = {};
+
+  beforeEach(() => {
+    cookieStore = {};
+    TestBed.resetTestingModule();
+  });
+
+  function createCookieServiceStub() {
+    return {
+      get: (name: string) => cookieStore[name] || null,
+      set: (name: string, value: string) => { cookieStore[name] = value; },
+      delete: (name: string) => { delete cookieStore[name]; }
+    };
+  }
+
+  it('stores token and user on successful login', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        AuthService,
+        { provide: CookieService, useValue: createCookieServiceStub() },
+        TransferState
+      ]
+    });
+
+    const service = TestBed.inject(AuthService);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    service.login({ email: 'ada@example.com', password: 'secret123' }).subscribe((user) => {
+      expect(user.email).toBe('ada@example.com');
+    });
+
+    const request = httpController.expectOne(`${environment.url}login`);
+    expect(request.request.method).toBe('POST');
+    request.flush({
+      message: 'Sesion iniciada correctamente.',
+      token: 'plain-text-token',
+      token_type: 'Bearer',
+      user: {
+        id: 1,
+        nombre_apellido: 'Ada Lovelace',
+        email: 'ada@example.com'
+      }
+    });
+
+    expect(service.token()).toBe('plain-text-token');
+    expect(service.user()?.email).toBe('ada@example.com');
+    expect(service.isAuthenticated()).toBe(true);
+    expect(cookieStore['shopit.auth.token']).toBe('plain-text-token');
+
+    httpController.verify();
+  });
+
+  it('hydrates token from cookies and loads the current user during bootstrap', async () => {
+    cookieStore['shopit.auth.token'] = 'persisted-token';
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        AuthService,
+        { provide: CookieService, useValue: createCookieServiceStub() },
+        TransferState
+      ]
+    });
+
+    const service = TestBed.inject(AuthService);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    const bootstrapPromise = service.bootstrap();
+    const request = httpController.expectOne(`${environment.url}me`);
+
+    expect(request.request.method).toBe('GET');
+    request.flush({
+      id: 9,
+      nombre_apellido: 'Grace Hopper',
+      email: 'grace@example.com'
+    });
+
+    await expect(bootstrapPromise).resolves.toBeUndefined();
+    expect(service.user()?.email).toBe('grace@example.com');
+    expect(service.isAuthenticated()).toBe(true);
+
+    httpController.verify();
+  });
+
+  it('clears the session when bootstrap receives 401 from /me', async () => {
+    cookieStore['shopit.auth.token'] = 'expired-token';
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        AuthService,
+        { provide: CookieService, useValue: createCookieServiceStub() },
+        TransferState
+      ]
+    });
+
+    const service = TestBed.inject(AuthService);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    const bootstrapPromise = service.bootstrap();
+    const request = httpController.expectOne(`${environment.url}me`);
+
+    request.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
+
+    await expect(bootstrapPromise).resolves.toBeUndefined();
+    expect(service.user()).toBeNull();
+    expect(service.token()).toBeNull();
+    expect(service.isAuthenticated()).toBe(false);
+    expect(cookieStore['shopit.auth.token']).toBeUndefined();
+
+    httpController.verify();
+  });
+
+  it('registers without creating a session', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        AuthService,
+        { provide: CookieService, useValue: createCookieServiceStub() },
+        TransferState
+      ]
+    });
+
+    const service = TestBed.inject(AuthService);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    service
+      .register({
+        nombre_apellido: 'Ada Lovelace',
+        email: 'ada@example.com',
+        password: 'secret123',
+        password_confirmation: 'secret123'
+      })
+      .subscribe((response) => {
+        expect(response.data.email).toBe('ada@example.com');
+      });
+
+    const request = httpController.expectOne(`${environment.url}register`);
+    expect(request.request.method).toBe('POST');
+    request.flush({
+      message: 'Usuario registrado correctamente.',
+      data: {
+        id: 1,
+        nombre_apellido: 'Ada Lovelace',
+        email: 'ada@example.com'
+      }
+    });
+
+    expect(service.token()).toBeNull();
+    expect(service.user()).toBeNull();
+    expect(service.isAuthenticated()).toBe(false);
+
+    httpController.verify();
+  });
+
+  it('clears local session even when logout request fails', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        AuthService,
+        { provide: CookieService, useValue: createCookieServiceStub() },
+        TransferState
+      ]
+    });
+
+    const service = TestBed.inject(AuthService);
+    const httpController = TestBed.inject(HttpTestingController);
+
+    service.login({ email: 'ada@example.com', password: 'secret123' }).subscribe();
+    httpController.expectOne(`${environment.url}login`).flush({
+      message: 'Sesion iniciada correctamente.',
+      token: 'plain-text-token',
+      token_type: 'Bearer',
+      user: {
+        id: 1,
+        nombre_apellido: 'Ada Lovelace',
+        email: 'ada@example.com'
+      }
+    });
+
+    service.logout().subscribe({
+      error: () => undefined
+    });
+
+    const logoutRequest = httpController.expectOne(`${environment.url}logout`);
+    expect(logoutRequest.request.method).toBe('POST');
+    logoutRequest.flush({ message: 'Unauthorized' }, { status: 401, statusText: 'Unauthorized' });
+
+    expect(service.token()).toBeNull();
+    expect(service.user()).toBeNull();
+    expect(cookieStore['shopit.auth.token']).toBeUndefined();
+
+    httpController.verify();
+  });
+});

src/app/core/services/auth/auth.service.ts

@@ -0,0 +1,122 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { isPlatformBrowser, isPlatformServer } from '@angular/common';
+import { computed, inject, Injectable, PLATFORM_ID, signal, TransferState, makeStateKey } from '@angular/core';
+import { firstValueFrom, map, Observable, of, tap } from 'rxjs';
+
+import { environment } from '../../../../environments/environment';
+import {
+  AuthUser,
+  LoginPayload,
+  LoginResponse,
+  RegisterPayload,
+  RegisterResponse,
+  UpdateProfilePayload
+} from './auth.interfaces';
+import { CookieService } from '../cookie/cookie.service';
+
+const AUTH_TOKEN_COOKIE_KEY = 'shopit.auth.token';
+const AUTH_USER_SSR_STATE_KEY = makeStateKey<AuthUser>('shopit.auth.user');
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private readonly http = inject(HttpClient);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly cookieService = inject(CookieService);
+  private readonly transferState = inject(TransferState);
+
+  private readonly userState = signal<AuthUser | null>(null);
+  private readonly tokenState = signal<string | null>(null);
+
+  readonly user = this.userState.asReadonly();
+  readonly token = this.tokenState.asReadonly();
+  readonly isAuthenticated = computed(() => this.tokenState() !== null);
+
+  login(payload: LoginPayload): Observable<AuthUser> {
+    return this.http.post<LoginResponse>(`${environment.url}login`, payload).pipe(
+      tap((response) => this.applyAuthenticatedState(response.token, response.user)),
+      map((response) => response.user)
+    );
+  }
+
+  register(payload: RegisterPayload): Observable<RegisterResponse> {
+    return this.http.post<RegisterResponse>(`${environment.url}register`, payload);
+  }
+
+  updateProfile(payload: UpdateProfilePayload): Observable<AuthUser> {
+    return this.http.put<AuthUser>(`${environment.url}me`, payload).pipe(
+      tap((user) => this.userState.set(user))
+    );
+  }
+
+  logout(): Observable<void> {
+    if (!this.tokenState()) {
+      this.clearSession();
+      return of(void 0);
+    }
+
+    return this.http.post<void>(`${environment.url}logout`, {}).pipe(
+      tap({
+        next: () => this.clearSession(),
+        error: () => this.clearSession()
+      })
+    );
+  }
+
+  async bootstrap(): Promise<void> {
+    this.hydrateSession();
+
+    if (!this.tokenState() || this.userState()) {
+      return;
+    }
+
+    const transferredUser = this.transferState.get(AUTH_USER_SSR_STATE_KEY, null);
+    if (transferredUser) {
+      this.transferState.remove(AUTH_USER_SSR_STATE_KEY);
+      this.userState.set(transferredUser);
+      return;
+    }
+
+    try {
+      const user = await firstValueFrom(this.loadCurrentUser());
+      if (isPlatformServer(this.platformId)) {
+        this.transferState.set(AUTH_USER_SSR_STATE_KEY, user);
+      }
+    } catch (error) {
+      if (this.isUnauthorizedError(error)) {
+        this.clearSession();
+        return;
+      }
+
+      throw error;
+    }
+  }
+
+  loadCurrentUser(): Observable<AuthUser> {
+    return this.http.get<AuthUser>(`${environment.url}me`).pipe(
+      tap((user) => this.userState.set(user))
+    );
+  }
+
+  hydrateSession(): void {
+    const token = this.cookieService.get(AUTH_TOKEN_COOKIE_KEY);
+    this.tokenState.set(token);
+  }
+
+  clearSession(): void {
+    this.userState.set(null);
+    this.tokenState.set(null);
+    this.cookieService.delete(AUTH_TOKEN_COOKIE_KEY);
+  }
+
+  private applyAuthenticatedState(token: string, user: AuthUser): void {
+    this.tokenState.set(token);
+    this.userState.set(user);
+    this.cookieService.set(AUTH_TOKEN_COOKIE_KEY, token);
+  }
+
+  private isUnauthorizedError(error: unknown): error is HttpErrorResponse {
+    return error instanceof HttpErrorResponse && error.status === 401;
+  }
+}

src/app/core/services/cart/cart.interface.ts

@@ -3,12 +3,14 @@ export interface CartItemProduct {
   imagen: string | null;
 }
 
+export type BuyableType = 'variant' | 'bundle';
+
 export interface CartItem {
   id: number;
   cantidad: number;
   precio_unitario: string;
-  product_id: number;
-  product_variant_id: number;
+  buyable_type: BuyableType;
+  buyable_id: number;
   product: CartItemProduct | null;
 }
 

src/app/core/services/cart/cart.service.spec.ts

@@ -21,20 +21,21 @@ describe('CartService', () => {
         id: 1,
         cantidad: 2,
         precio_unitario: '10.00',
-        product_id: 5,
-        product_variant_id: 10,
+        buyable_type: 'variant',
+        buyable_id: 10,
         product: {
           nombre: 'Test Product (Size: M)',
-          imagen: null
-        }
-      }
+          imagen: null,
+        },
+      },
     ],
-    subtotal: '20.00'
+    subtotal: '20.00',
   };
 
   beforeEach(() => {
     tenantServiceMock = {
-      getTenantApiUrl: vi.fn().mockReturnValue('http://api.test/tenants/acme')
+      getTenantApiUrl: vi.fn().mockReturnValue('http://api.test/tenants/acme'),
+      tenant: vi.fn().mockReturnValue({ codigo: 'acme' }),
     };
 
     TestBed.configureTestingModule({
@@ -42,8 +43,8 @@ describe('CartService', () => {
         CartService,
         provideHttpClient(),
         provideHttpClientTesting(),
-        { provide: TenantService, useValue: tenantServiceMock }
-      ]
+        { provide: TenantService, useValue: tenantServiceMock },
+      ],
     });
 
     service = TestBed.inject(CartService);
@@ -74,15 +75,31 @@ describe('CartService', () => {
     req.flush({ data: mockCart });
   });
 
+  it('should clear cart state locally', () => {
+    service.clearCart();
+
+    expect(service.cart()).toEqual({
+      id: null,
+      tenant_codigo: 'acme',
+      status: 'active',
+      items: [],
+      subtotal: '0.00',
+    });
+  });
+
   it('should add item and update signal', () => {
-    service.addItem(10, 2).subscribe((res) => {
+    service.addItem('variant', 10, 2).subscribe((res) => {
       expect(res.data).toEqual(mockCart);
       expect(service.cart()).toEqual(mockCart);
     });
 
     const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items');
     expect(req.request.method).toBe('POST');
-    expect(req.request.body).toEqual({ product_variant_id: 10, cantidad: 2 });
+    expect(req.request.body).toEqual({
+      buyable_type: 'variant',
+      buyable_id: 10,
+      cantidad: 2,
+    });
     expect(req.request.withCredentials).toBe(true);
     req.flush({ data: mockCart });
   });
@@ -109,7 +126,7 @@ describe('CartService', () => {
       tenant_codigo: 'acme',
       status: 'active',
       items: [],
-      subtotal: '0.00'
+      subtotal: '0.00',
     };
 
     service.removeItem(10).subscribe((res) => {

src/app/core/services/cart/cart.service.ts

@@ -1,13 +1,13 @@
 import { inject, Injectable, signal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { map, Observable, tap } from 'rxjs';
+import { catchError, map, Observable, tap } from 'rxjs';
 
 import { ApiResponse } from '../api-response.interface';
 import { TenantService } from '../tenant.service';
-import { Cart } from './cart.interface';
+import { BuyableType, Cart } from './cart.interface';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class CartService {
   private readonly http = inject(HttpClient);
@@ -16,53 +16,89 @@ export class CartService {
   private readonly cartState = signal<Cart | null>(null);
   readonly cart = this.cartState.asReadonly();
 
+  private readonly isUpdatingState = signal<boolean>(false);
+  readonly isUpdating = this.isUpdatingState.asReadonly();
+
   private get tenantApiUrl(): string {
     return this.tenantService.getTenantApiUrl();
   }
 
+  clearCart(): void {
+    this.cartState.set({
+      id: null,
+      tenant_codigo: this.tenantService.tenant()?.codigo ?? '',
+      status: 'active',
+      items: [],
+      subtotal: '0.00',
+    });
+  }
+
   loadCart(): Observable<Cart> {
     return this.http
       .get<ApiResponse<Cart>>(`${this.tenantApiUrl}/cart`, {
-        withCredentials: true
+        withCredentials: true,
       })
       .pipe(
         map((response) => response.data),
-        tap((cart) => this.cartState.set(cart))
+        tap((cart) => this.cartState.set(cart)),
       );
   }
 
-  addItem(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+  addItem(
+    buyableType: BuyableType,
+    buyableId: number,
+    cantidad: number,
+  ): Observable<ApiResponse<Cart>> {
+    this.isUpdatingState.set(true);
     return this.http
-      .post<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items`,
-        { product_variant_id: productVariantId, cantidad },
-        { withCredentials: true }
-      )
+      .post<
+        ApiResponse<Cart>
+      >(`${this.tenantApiUrl}/cart/items`, { buyable_type: buyableType, buyable_id: buyableId, cantidad }, { withCredentials: true })
       .pipe(
-        tap((response) => this.cartState.set(response.data))
+        tap((response) => {
+          this.cartState.set(response.data);
+          this.isUpdatingState.set(false);
+        }),
+        catchError((error) => {
+          this.isUpdatingState.set(false);
+          throw error;
+        }),
       );
   }
 
-  updateItemQuantity(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+  updateItemQuantity(cartItemId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+    this.isUpdatingState.set(true);
     return this.http
-      .patch<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { cantidad },
-        { withCredentials: true }
-      )
+      .patch<
+        ApiResponse<Cart>
+      >(`${this.tenantApiUrl}/cart/items/${cartItemId}`, { cantidad }, { withCredentials: true })
       .pipe(
-        tap((response) => this.cartState.set(response.data))
+        tap((response) => {
+          this.cartState.set(response.data);
+          this.isUpdatingState.set(false);
+        }),
+        catchError((error) => {
+          this.isUpdatingState.set(false);
+          throw error;
+        }),
       );
   }
 
-  removeItem(productVariantId: number): Observable<ApiResponse<Cart>> {
+  removeItem(cartItemId: number): Observable<ApiResponse<Cart>> {
+    this.isUpdatingState.set(true);
     return this.http
-      .delete<ApiResponse<Cart>>(
-        `${this.tenantApiUrl}/cart/items/${productVariantId}`,
-        { withCredentials: true }
-      )
+      .delete<
+        ApiResponse<Cart>
+      >(`${this.tenantApiUrl}/cart/items/${cartItemId}`, { withCredentials: true })
       .pipe(
-        tap((response) => this.cartState.set(response.data))
+        tap((response) => {
+          this.cartState.set(response.data);
+          this.isUpdatingState.set(false);
+        }),
+        catchError((error) => {
+          this.isUpdatingState.set(false);
+          throw error;
+        }),
       );
   }
 }

src/app/core/services/catalog/catalog.interface.ts

@@ -29,16 +29,22 @@ export interface ProductAttribute {
   options: ProductAttributeOption[];
 }
 
+export type InventoryPolicy = 'tracked' | 'unlimited';
+
 export interface ProductVariant {
   id: number;
-  cantidad_maxima: number;
+  inventory_policy: InventoryPolicy;
+  cantidad_maxima: number | null;
+  cantidad_vendida: number;
   definitions: Record<string, string>;
   images: string[];
 }
 
 export interface ProductVariantMap {
   variant_id: number;
-  cantidad_maxima: number;
+  inventory_policy: InventoryPolicy;
+  cantidad_maxima: number | null;
+  cantidad_vendida: number;
   attributes: Record<string, string>;
 }
 
@@ -47,4 +53,3 @@ export interface ProductDetail extends Product {
   variants_map: ProductVariantMap[];
   variant: ProductVariant | null;
 }
-

src/app/core/services/checkout.service.ts

@@ -0,0 +1,153 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+
+import { environment } from '../../../environments/environment';
+
+export interface CreatePurchasePayload {
+  cart_id: number;
+  dni: string;
+  telefono: string;
+  nombre_apellido: string;
+  email: string;
+}
+
+export interface PurchaseStatusResponse {
+  status: string | null;
+}
+
+export interface PurchaseSummaryResponse extends PurchaseStatusResponse {
+  id: number;
+  created_at: string | null;
+  total: string;
+}
+
+export interface PurchaseDetailAttributeResponse {
+  name: string;
+  value: string | null;
+}
+
+export interface PurchaseDetailItemResponse {
+  id: number;
+  quantity: number;
+  unit_price: string;
+  line_total: string;
+  product: {
+    id: number;
+    nombre: string;
+    slug: string;
+    imagen: string | null;
+  } | null;
+  variant: {
+    id: number;
+    attributes: PurchaseDetailAttributeResponse[];
+  } | null;
+}
+
+export interface PurchaseDetailResponse extends PurchaseStatusResponse {
+  id: number;
+  cart_id: number | null;
+  tenant_codigo: string;
+  user_id: number;
+  created_at: string | null;
+  payment_method: string | null;
+  dni: string | null;
+  telefono: string | null;
+  nombre_apellido: string | null;
+  email: string | null;
+  items_source: 'purchase' | 'cart' | null;
+  items: PurchaseDetailItemResponse[];
+  subtotal: string;
+  total: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CheckoutService {
+  private readonly http = inject(HttpClient);
+
+  async createPurchase(tenantCode: string, payload: CreatePurchasePayload): Promise<{ id: number }> {
+    const response = await firstValueFrom(
+      this.http.post<{ data?: { id: number }; id?: number }>(`${environment.url}tenants/${tenantCode}/compras`, payload)
+    );
+
+    const purchase = this.extractResponseData<{ id: number }>(response);
+
+    if (!purchase?.id) {
+      throw new Error('Error al crear la compra.');
+    }
+
+    return purchase;
+  }
+
+  async generatePaymentIntent(tenantCode: string, purchaseId: number, method: 'qr' | 'transfer' | 'telepagos', payerDni?: string): Promise<any> {
+    const payload: any = { method };
+    if (payerDni) {
+      payload.payer_dni = payerDni;
+    }
+    const response = await firstValueFrom(
+      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, payload)
+    );
+    if (!response) {
+      throw new Error('Error al generar la intención de pago.');
+    }
+    return response;
+  }
+
+  async completePurchase(tenantCode: string, purchaseId: number): Promise<PurchaseStatusResponse> {
+    const response = await firstValueFrom(
+      this.http.post<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/complete`, {})
+    );
+
+    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
+
+    if (!purchase) {
+      throw new Error('Error al finalizar la compra.');
+    }
+
+    return {
+      status: purchase.status ?? null
+    };
+  }
+
+  async getPurchases(tenantCode: string, status?: string): Promise<{ data: PurchaseSummaryResponse[] }> {
+    let url = `${environment.url}tenants/${tenantCode}/compras`;
+    if (status) {
+      url += `?status=${status}`;
+    }
+    const response = await firstValueFrom(
+      this.http.get<{ data: PurchaseSummaryResponse[] }>(url)
+    );
+    if (!response) {
+      throw new Error('Error al obtener las compras.');
+    }
+    return response;
+  }
+
+  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseDetailResponse> {
+    const response = await firstValueFrom(
+      this.http.get<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
+    );
+
+    const purchase = this.extractResponseData<PurchaseDetailResponse>(response);
+
+    if (!purchase) {
+      throw new Error('Error al obtener la compra.');
+    }
+
+    return purchase;
+  }
+
+  private extractResponseData<T>(response: T | { data?: T } | null | undefined): T | null {
+    if (!response) {
+      return null;
+    }
+
+    if (typeof response === 'object' && 'data' in response && response.data) {
+      return response.data;
+    }
+
+    return response as T;
+  }
+}

src/app/core/services/cookie/cookie.service.ts

@@ -0,0 +1,59 @@
+import { isPlatformBrowser } from '@angular/common';
+import { inject, Injectable, PLATFORM_ID, REQUEST } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CookieService {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly document = inject(DOCUMENT);
+  private readonly request = inject(REQUEST, { optional: true });
+
+  get(name: string): string | null {
+    if (isPlatformBrowser(this.platformId)) {
+      return this.getCookieFromString(name, this.document.cookie);
+    }
+
+    if (this.request) {
+      const cookieHeader = this.request.headers.get('cookie') || '';
+      return this.getCookieFromString(name, cookieHeader);
+    }
+
+    return null;
+  }
+
+  set(name: string, value: string, days = 7): void {
+    if (isPlatformBrowser(this.platformId)) {
+      const date = new Date();
+      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+      const expires = `expires=${date.toUTCString()}`;
+      this.document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;
+    }
+  }
+
+  delete(name: string): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax`;
+    }
+  }
+
+  private getCookieFromString(name: string, cookieString: string): string | null {
+    if (!cookieString) {
+      return null;
+    }
+    
+    const nameEQ = `${name}=`;
+    const ca = cookieString.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') {
+        c = c.substring(1, c.length);
+      }
+      if (c.indexOf(nameEQ) === 0) {
+        return c.substring(nameEQ.length, c.length);
+      }
+    }
+    return null;
+  }
+}

src/app/core/services/modal.service.spec.ts

@@ -18,6 +18,7 @@ import { firstValueFrom } from 'rxjs';
 
 import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
 import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
+import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
 import {
   MODAL_DATA,
   ModalRef,
@@ -212,6 +213,41 @@ describe('ModalService', () => {
       showCloseButton: false
     });
   });
+
+  it('opens the simple modal with default button label', () => {
+    service.openSimple({
+      title: 'Aviso',
+      content: 'Este es un aviso simple.'
+    });
+
+    const activeModal = service.activeModal();
+
+    expect(activeModal?.component).toBe(SimpleModalComponent);
+    expect(activeModal?.config).toEqual({
+      title: 'Aviso',
+      data: {
+        content: 'Este es un aviso simple.',
+        buttonLabel: 'Entendido'
+      },
+      size: 'md',
+      closeOnBackdrop: true,
+      closeOnEscape: true,
+      showCloseButton: true
+    });
+  });
+
+  it('maps the simple modal close result to undefined', async () => {
+    const result$ = service.openSimple({
+      title: 'Aviso',
+      content: 'Este es un aviso simple.'
+    });
+    const activeModal = service.activeModal();
+    const resultPromise = firstValueFrom(result$);
+
+    activeModal?.ref.close();
+
+    await expect(resultPromise).resolves.toBeUndefined();
+  });
 });
 
 @Component({

src/app/core/services/modal.service.ts

@@ -2,6 +2,7 @@ import { InjectionToken, Injectable, Type, signal } from '@angular/core';
 import { Observable, Subject, map } from 'rxjs';
 import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component';
 import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component';
+import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type ModalDismissReason =
@@ -43,6 +44,17 @@ export interface ConfirmModalConfig
   cancelLabel?: string;
 }
 
+export interface SimpleModalData {
+  content: string;
+  buttonLabel: string;
+}
+
+export interface SimpleModalConfig
+  extends Omit<ModalConfig<SimpleModalData>, 'data'> {
+  content: string;
+  buttonLabel?: string;
+}
+
 export interface ActiveModalState<TResult = unknown, TData = unknown> {
   component: Type<unknown>;
   config: NormalizedModalConfig<TData>;
@@ -158,6 +170,19 @@ export class ModalService {
     );
   }
 
+  openSimple(config: SimpleModalConfig): Observable<void> {
+    return this.openSimpleRef(config).afterClosed$.pipe(
+      map(() => undefined)
+    );
+  }
+
+  openSimpleRef(config: SimpleModalConfig): ModalRef<void> {
+    return this.open(
+      SimpleModalComponent,
+      this.buildSimpleModalConfig(config)
+    );
+  }
+
   private close<TResult>(ref: ModalRef<TResult>, result?: TResult): void {
     if (this.activeModalState()?.ref !== ref) {
       return;
@@ -207,4 +232,22 @@ export class ModalService {
       }
     };
   }
+
+  private buildSimpleModalConfig(
+    config: SimpleModalConfig
+  ): ModalConfig<SimpleModalData> {
+    const {
+      content,
+      buttonLabel = 'Entendido',
+      ...modalConfig
+    } = config;
+
+    return {
+      ...modalConfig,
+      data: {
+        content,
+        buttonLabel
+      }
+    };
+  }
 }

src/app/core/services/tenant.interface.ts

@@ -1,5 +1,34 @@
 import { ApiResponse } from './api-response.interface';
 
+export interface BankAccount {
+  id: number;
+  tenant_code: string;
+  titular: string;
+  entidad: string;
+  alias: string;
+  cvu: string;
+}
+
+export interface HeroConfig {
+  background_image?: string | null;
+  title_html?: string | null;
+  description_html?: string | null;
+  button_text?: string | null;
+  button_href?: string | null;
+}
+
+export interface EventConfig {
+  title?: string | null;
+  location?: string | null;
+  dates?: string[] | null;
+}
+
+export interface Menu {
+  id: number;
+  code: string;
+  route: string;
+}
+
 export interface Tenant {
   id: number;
   codigo: string;
@@ -13,6 +42,11 @@ export interface Tenant {
   footer_bg_color: string;
   header_logo: string;
   footer_logo: string;
+  selected_bank_account_id?: number | null;
+  selected_bank_account?: BankAccount | null;
+  hero_config?: HeroConfig | null;
+  event_config?: EventConfig | null;
+  menues?: Menu[];
 }
 
 export type TenantBootstrapResponse = ApiResponse<Tenant>;

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

@@ -91,6 +91,9 @@
             <app-button variant="danger-secondary" (click)="openWideModal()">
               Abrir modal ancho
             </app-button>
+            <app-button (click)="openSimpleModal()">
+              Abrir simple modal
+            </app-button>
           </div>
           <div class="modal-showcase__result" data-testid="modal-last-result">
             {{ lastModalResult }}
@@ -333,6 +336,94 @@
 
       <hr class="section-divider" />
 
+      <div class="stepper-showcase">
+        <h2>Form Stepper</h2>
+        <p class="text-muted mb-4">
+          Stepper vertical reutilizable. Cada paso maneja sus propios botones de navegacion. No se puede avanzar si el paso no es valido.
+        </p>
+
+        <app-stepper #demoStepper>
+
+          <!-- Paso 1: Siempre valido -->
+          <app-step label="Informacion Personal" [isValid]="true">
+            <div class="row g-3">
+              <div class="col-md-6 input-field">
+                <label for="stepper-name">Nombre</label>
+                <app-input id="stepper-name" placeholder="Juan Perez" [(value)]="user" />
+              </div>
+              <div class="col-md-6 input-field">
+                <label for="stepper-email">Email</label>
+                <app-input id="stepper-email" type="email" placeholder="mail@empresa.com" [(value)]="email" />
+              </div>
+            </div>
+            <div class="d-flex justify-content-end mt-4">
+              <app-button (click)="demoStepper.next()">
+                Siguiente <i class="fa-solid fa-arrow-right ms-1"></i>
+              </app-button>
+            </div>
+          </app-step>
+
+          <!-- Paso 2: Valido solo si testStep2Valid es true -->
+          <app-step label="Configuracion de Cuenta" [isValid]="testStep2Valid">
+            <div class="row g-3">
+              <div class="col-md-6 input-field">
+                <label for="stepper-password">Contraseña</label>
+                <app-input id="stepper-password" type="password-toggle" placeholder="********" [(value)]="password" />
+              </div>
+              <div class="col-md-6 input-field">
+                <label for="stepper-amount">Presupuesto mensual</label>
+                <app-input id="stepper-amount" type="currency" placeholder="0" [(value)]="amount" />
+              </div>
+            </div>
+
+            <div class="stepper-validity-control mt-3 d-flex align-items-center gap-3">
+              <span class="text-muted small">
+                Simular validez del paso:
+              </span>
+              <app-button
+                [variant]="testStep2Valid ? 'secondary' : 'primary'"
+                (click)="testStep2Valid = !testStep2Valid"
+              >
+                @if (testStep2Valid) {
+                  <i class="fa-solid fa-check me-1"></i> Valido
+                } @else {
+                  <i class="fa-solid fa-xmark me-1"></i> Invalido — Siguiente bloqueado
+                }
+              </app-button>
+            </div>
+
+            <div class="d-flex justify-content-between mt-4">
+              <app-button variant="secondary" (click)="demoStepper.previous()">
+                <i class="fa-solid fa-arrow-left me-1"></i> Volver
+              </app-button>
+              <app-button (click)="demoStepper.next()" [disabled]="!testStep2Valid">
+                Siguiente <i class="fa-solid fa-arrow-right ms-1"></i>
+              </app-button>
+            </div>
+          </app-step>
+
+          <!-- Paso 3: Revision final, siempre valido -->
+          <app-step label="Revision y Confirmacion" [isValid]="true">
+            <div class="p-3 rounded bg-light">
+              <p class="mb-1"><strong>Nombre:</strong> {{ user }}</p>
+              <p class="mb-1"><strong>Email:</strong> {{ email }}</p>
+              <p class="mb-0"><strong>Presupuesto:</strong> {{ amount }}</p>
+            </div>
+            <div class="d-flex justify-content-between mt-4">
+              <app-button variant="secondary" (click)="demoStepper.previous()">
+                <i class="fa-solid fa-arrow-left me-1"></i> Volver
+              </app-button>
+              <app-button (click)="triggerToast('success')">
+                <i class="fa-solid fa-check me-1"></i> Confirmar
+              </app-button>
+            </div>
+          </app-step>
+
+        </app-stepper>
+      </div>
+
+      <hr class="section-divider" />
+
       <div class="cart-showcase">
         <div class="cart-showcase__header">
           <div>
@@ -363,6 +454,7 @@
           </div>
         }
       </div>
+
     </div>
   </section>
 
@@ -561,3 +653,4 @@
     </div>
   </app-store-section>
 </main>
+

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.spec.ts

@@ -186,9 +186,61 @@ describe('ReutilizablesTestPageComponent', () => {
     ).toContain('Todavia no se abrio ningun modal.');
 
     confirmButton.click();
+    fixture.detectChanges();
     deleteButton.click();
+    fixture.detectChanges();
 
-    expect(modalServiceStub.openConfirm).toHaveBeenCalled();
-    expect(modalServiceStub.openConfirmDelete).toHaveBeenCalled();
+    expect(modalServiceStub.openConfirm).toHaveBeenCalledWith({
+      title: 'Confirmar accion',
+      content: 'Caso base para verificar apertura, cierre y devolucion de resultado.',
+      confirmLabel: 'Confirmar'
+    });
+    expect(modalServiceStub.openConfirmDelete).toHaveBeenCalledWith({
+      title: 'Eliminar producto',
+      content:
+        'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
+      confirmLabel: 'Eliminar'
+    });
+    expect(
+      element.querySelector('[data-testid="modal-last-result"]')?.textContent
+    ).toContain('Resultado: false');
+  });
+
+  it('updates the visible result when the confirm modal resolves to true', async () => {
+    const modalServiceStub = createModalServiceStub();
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant)
+        },
+        {
+          provide: ToastService,
+          useValue: createToastServiceStub()
+        },
+        {
+          provide: ModalService,
+          useValue: modalServiceStub
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const confirmButton = Array.from(
+      element.querySelectorAll('.button-group app-button button')
+    ).find((button) =>
+      button.textContent?.includes('Abrir confirm modal')
+    ) as HTMLButtonElement;
+
+    confirmButton.click();
+    fixture.detectChanges();
+
+    expect(
+      element.querySelector('[data-testid="modal-last-result"]')?.textContent
+    ).toContain('Resultado: true');
   });
 });

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

@@ -13,6 +13,8 @@ import { StoreSectionComponent } from '../../../../shared/components/store-secti
 import { ModalService } from '../../../../core/services/modal.service';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
+import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
+import { StepComponent } from '../../../../shared/components/stepper/step.component';
 
 @Component({
   selector: 'app-reutilizables-test-page',
@@ -24,7 +26,9 @@ import { ToastService } from '../../../../core/services/toast.service';
     ProductCardComponent,
     StoreSectionComponent,
     IconButtonComponent,
-    CartIconComponent
+    CartIconComponent,
+    StepperComponent,
+    StepComponent
   ],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
@@ -33,6 +37,9 @@ export class ReutilizablesTestPageComponent {
   private readonly tenantService = inject(TenantService);
   private readonly toastService = inject(ToastService);
   private readonly modalService = inject(ModalService);
+
+  protected testStep1Valid = true;
+  protected testStep2Valid = false;
   protected readonly tenant = this.tenantService.tenant;
   protected textValue = 'Auriculares';
   protected numberValue = '24';
@@ -198,14 +205,11 @@ export class ReutilizablesTestPageComponent {
   }
 
   protected openConfirmDeleteModal(): void {
-    this.modalService.openConfirmDelete({
+    this.openConfirmDelete({
       title: 'Eliminar producto',
       content:
         'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
-      confirmLabel: 'Eliminar',
-      cancelLabel: 'Conservar'
-    }).subscribe((confirmed) => {
-      this.lastModalResult = `Resultado: ${confirmed}`;
+      confirmLabel: 'Eliminar'
     });
   }
 
@@ -229,9 +233,29 @@ export class ReutilizablesTestPageComponent {
     });
   }
 
+  protected openSimpleModal(): void {
+    this.modalService.openSimple({
+      title: 'Mensaje del sistema',
+      content: 'Este es un mensaje simple del sistema que no requiere confirmación.',
+      buttonLabel: 'Entendido'
+    }).subscribe(() => {
+      this.lastModalResult = 'Simple modal cerrado';
+    });
+  }
+
   private openConfirmModal(config: Parameters<ModalService['openConfirm']>[0]): void {
     this.modalService.openConfirm(config).subscribe((confirmed) => {
       this.lastModalResult = `Resultado: ${confirmed}`;
     });
   }
+
+  private openConfirmDelete(
+    config: Parameters<ModalService['openConfirmDelete']>[0]
+  ): void {
+    this.modalService.openConfirmDelete(config).subscribe((confirmed) => {
+      this.lastModalResult = `Resultado: ${confirmed}`;
+    });
+  }
 }
+
+

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.spec.ts

@@ -0,0 +1,75 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ProductAttribute } from '../../../../core/services/catalog/catalog.interface';
+import { ProductAttributeSelectorComponent } from './product-attribute-selector.component';
+
+describe('ProductAttributeSelectorComponent', () => {
+  const sizeAttribute: ProductAttribute = {
+    id: 1,
+    codigo: 'size',
+    nombre: 'Size',
+    is_required: true,
+    metadata_schema: null,
+    type: 'select',
+    options: [
+      { id: 10, value: 'S', label: 'S', sort_order: 0, metadata: null },
+      { id: 20, value: 'M', label: 'M', sort_order: 1, metadata: null },
+    ],
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductAttributeSelectorComponent],
+    }).compileComponents();
+  });
+
+  it('keeps an unlimited option available when maximum quantity is null', () => {
+    const fixture = TestBed.createComponent(ProductAttributeSelectorComponent);
+    fixture.componentRef.setInput('attributes', [sizeAttribute]);
+    fixture.componentRef.setInput('variantsMap', [
+      {
+        variant_id: 1,
+        inventory_policy: 'unlimited',
+        cantidad_maxima: null,
+        cantidad_vendida: 0,
+        attributes: { size: 'S' },
+      },
+    ]);
+    fixture.detectChanges();
+
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('.attribute-selector__text-option'),
+    ) as HTMLButtonElement[];
+    expect(buttons[0].disabled).toBe(false);
+    expect(buttons[1].disabled).toBe(true);
+  });
+
+  it('disables tracked options without available stock', () => {
+    const fixture = TestBed.createComponent(ProductAttributeSelectorComponent);
+    fixture.componentRef.setInput('attributes', [sizeAttribute]);
+    fixture.componentRef.setInput('variantsMap', [
+      {
+        variant_id: 1,
+        inventory_policy: 'tracked',
+        cantidad_maxima: 0,
+        cantidad_vendida: 0,
+        attributes: { size: 'S' },
+      },
+      {
+        variant_id: 2,
+        inventory_policy: 'tracked',
+        cantidad_maxima: 2,
+        cantidad_vendida: 0,
+        attributes: { size: 'M' },
+      },
+    ]);
+    fixture.detectChanges();
+
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('.attribute-selector__text-option'),
+    ) as HTMLButtonElement[];
+    expect(buttons[0].disabled).toBe(true);
+    expect(buttons[1].disabled).toBe(false);
+  });
+});

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.ts

@@ -6,14 +6,14 @@ import {
   input,
   output,
   signal,
-  untracked
+  untracked,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
   ProductAttribute,
   ProductAttributeOption,
   ProductVariant,
-  ProductVariantMap
+  ProductVariantMap,
 } from '../../../../core/services/catalog/catalog.interface';
 
 @Component({
@@ -22,7 +22,7 @@ import {
   imports: [CommonModule],
   templateUrl: './product-attribute-selector.component.html',
   styleUrl: './product-attribute-selector.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductAttributeSelectorComponent {
   public attributes = input<ProductAttribute[]>([]);
@@ -44,28 +44,36 @@ export class ProductAttributeSelectorComponent {
       availability[attribute.id] = {};
       for (const option of attribute.options) {
         const optionNormalized = this.normalizeText(option.value || option.label);
-        
-        const isAvailable = variants.some(variant => {
-          if (variant.cantidad_maxima <= 0) return false;
 
-          const variantAttrValue = this.getDefaultVariantAttributeValue(attribute, variant.attributes);
+        const isAvailable = variants.some((variant) => {
+          if (!this.isVariantAvailable(variant)) return false;
+
+          const variantAttrValue = this.getDefaultVariantAttributeValue(
+            attribute,
+            variant.attributes,
+          );
           if (!variantAttrValue || this.normalizeText(variantAttrValue) !== optionNormalized) {
-             return false;
+            return false;
           }
 
           for (const otherAttr of attributes) {
-             if (otherAttr.id === attribute.id) continue;
-             const selectedOptionId = selections[otherAttr.id];
-             if (selectedOptionId !== undefined) {
-                const selectedOption = otherAttr.options.find(o => o.id === selectedOptionId);
-                if (selectedOption) {
-                   const selectedNormalized = this.normalizeText(selectedOption.value || selectedOption.label);
-                   const vAttrValue = this.getDefaultVariantAttributeValue(otherAttr, variant.attributes);
-                   if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
-                      return false;
-                   }
+            if (otherAttr.id === attribute.id) continue;
+            const selectedOptionId = selections[otherAttr.id];
+            if (selectedOptionId !== undefined) {
+              const selectedOption = otherAttr.options.find((o) => o.id === selectedOptionId);
+              if (selectedOption) {
+                const selectedNormalized = this.normalizeText(
+                  selectedOption.value || selectedOption.label,
+                );
+                const vAttrValue = this.getDefaultVariantAttributeValue(
+                  otherAttr,
+                  variant.attributes,
+                );
+                if (!vAttrValue || this.normalizeText(vAttrValue) !== selectedNormalized) {
+                  return false;
                 }
-             }
+              }
+            }
           }
           return true;
         });
@@ -85,7 +93,7 @@ export class ProductAttributeSelectorComponent {
     effect(() => {
       const attributes = this.attributes();
       const defaultVariant = this.defaultVariant();
-      
+
       untracked(() => {
         this.initializeSelections(attributes, defaultVariant);
       });
@@ -95,24 +103,27 @@ export class ProductAttributeSelectorComponent {
       const selections = this.selectedAttributeOptions();
       const variantsMap = this.variantsMap();
       const attributes = this.attributes();
-      
+
       untracked(() => {
-         this.emitMatchingVariant(selections, variantsMap, attributes);
+        this.emitMatchingVariant(selections, variantsMap, attributes);
       });
     });
   }
 
-  protected hasSelectedOption(attribute: ProductAttribute, option: ProductAttributeOption): boolean {
+  protected hasSelectedOption(
+    attribute: ProductAttribute,
+    option: ProductAttributeOption,
+  ): boolean {
     return this.selectedAttributeOptions()[attribute.id] === option.id;
   }
 
   protected selectAttributeOption(
     attribute: ProductAttribute,
-    option: ProductAttributeOption
+    option: ProductAttributeOption,
   ): void {
     this.selectedAttributeOptions.update((current) => ({
       ...current,
-      [attribute.id]: option.id
+      [attribute.id]: option.id,
     }));
   }
 
@@ -124,7 +135,10 @@ export class ProductAttributeSelectorComponent {
     return this.findFirstHexValue(option.metadata) ?? '#D9D9D9';
   }
 
-  private initializeSelections(attributes: ProductAttribute[], defaultVariant: ProductVariant | null): void {
+  private initializeSelections(
+    attributes: ProductAttribute[],
+    defaultVariant: ProductVariant | null,
+  ): void {
     const selections: Record<number, number> = {};
 
     for (const attribute of attributes) {
@@ -139,7 +153,7 @@ export class ProductAttributeSelectorComponent {
 
   private findDefaultOptionId(
     attribute: ProductAttribute,
-    variant: ProductVariant | null
+    variant: ProductVariant | null,
   ): number | null {
     if (!variant) {
       return null;
@@ -152,7 +166,7 @@ export class ProductAttributeSelectorComponent {
 
     const normalizedValue = this.normalizeText(defaultValue);
     const matchByValue = attribute.options.find(
-      (option) => this.normalizeText(option.value) === normalizedValue
+      (option) => this.normalizeText(option.value) === normalizedValue,
     );
 
     if (matchByValue) {
@@ -160,7 +174,7 @@ export class ProductAttributeSelectorComponent {
     }
 
     const matchByLabel = attribute.options.find(
-      (option) => this.normalizeText(option.label) === normalizedValue
+      (option) => this.normalizeText(option.label) === normalizedValue,
     );
 
     return matchByLabel?.id ?? null;
@@ -168,7 +182,7 @@ export class ProductAttributeSelectorComponent {
 
   private getDefaultVariantAttributeValue(
     attribute: ProductAttribute,
-    variantAttributes: Record<string, string>
+    variantAttributes: Record<string, string>,
   ): string | null {
     const normalizedCodigo = this.normalizeText(attribute.codigo);
     const normalizedNombre = this.normalizeText(attribute.nombre);
@@ -192,6 +206,10 @@ export class ProductAttributeSelectorComponent {
       .toLowerCase();
   }
 
+  private isVariantAvailable(variant: ProductVariantMap): boolean {
+    return variant.inventory_policy === 'unlimited' || (variant.cantidad_maxima ?? 0) > 0;
+  }
+
   private findFirstHexValue(value: unknown): string | null {
     if (typeof value === 'string') {
       const match = value.match(/#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/);
@@ -223,7 +241,7 @@ export class ProductAttributeSelectorComponent {
   private emitMatchingVariant(
     selections: Record<number, number>,
     variantsMap: ProductVariantMap[],
-    attributes: ProductAttribute[]
+    attributes: ProductAttribute[],
   ): void {
     if (attributes.length === 0 || variantsMap.length === 0) {
       this.variantChange.emit(null);
@@ -235,12 +253,12 @@ export class ProductAttributeSelectorComponent {
     for (const attr of attributes) {
       const selectedOptionId = selections[attr.id];
       if (selectedOptionId === undefined) {
-         allSelected = false;
-         break;
+        allSelected = false;
+        break;
       }
-      const option = attr.options.find(o => o.id === selectedOptionId);
+      const option = attr.options.find((o) => o.id === selectedOptionId);
       if (option) {
-         selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
+        selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
       }
     }
 
@@ -249,12 +267,12 @@ export class ProductAttributeSelectorComponent {
       return;
     }
 
-    const matchingVariant = variantsMap.find(vMap => {
-      return attributes.every(attr => {
-         const selectedValue = selectedValuesById[attr.id];
-         const vMapValue = this.getDefaultVariantAttributeValue(attr, vMap.attributes);
-         if (!vMapValue) return false;
-         return this.normalizeText(vMapValue) === selectedValue;
+    const matchingVariant = variantsMap.find((vMap) => {
+      return attributes.every((attr) => {
+        const selectedValue = selectedValuesById[attr.id];
+        const vMapValue = this.getDefaultVariantAttributeValue(attr, vMap.attributes);
+        if (!vMapValue) return false;
+        return this.normalizeText(vMapValue) === selectedValue;
       });
     });
 

src/app/features/store/components/product-carousel/product-carousel.component.html

@@ -1,51 +1,70 @@
 <div class="product-carousel d-flex flex-column gap-4">
   <!-- Active/Main Image Area -->
-  <div class="product-carousel__main position-relative bg-light  overflow-hidden">
+  <div class="product-carousel__main position-relative bg-light overflow-hidden">
     <!-- Main Image -->
     @if (images().length > 0) {
-    <img [src]="images()[activeIndex()]" alt="Product active image"
-      class="product-carousel__main-image w-100 h-100 object-fit-cover" />
+      <img
+        [ngSrc]="images()[activeIndex()]"
+        alt="Product active image"
+        fill
+        priority
+        sizes="(min-width: 992px) 42vw, 100vw"
+        class="product-carousel__main-image w-100 h-100 object-fit-cover"
+      />
     } @else {
-    <!-- Placeholder -->
-    <div class="product-carousel__placeholder w-100 h-100 d-flex align-items-center justify-content-center text-muted">
-      <i class="fa-solid fa-image fa-3x"></i>
-    </div>
+      <!-- Placeholder -->
+      <div
+        class="product-carousel__placeholder w-100 h-100 d-flex align-items-center justify-content-center text-muted"
+      >
+        <i class="fa-solid fa-image fa-3x"></i>
+      </div>
     }
 
     <!-- Discount Badge -->
     @if (discount() && discount()! > 0) {
-    <span
-      class="product-carousel__discount-badge position-absolute top-0 end-0 bg-primary text-white px-3 py-2 fw-semibold">
-      -{{ discount() }}%
-    </span>
+      <span
+        class="product-carousel__discount-badge position-absolute top-0 end-0 bg-primary text-white px-3 py-2 fw-semibold"
+      >
+        -{{ discount() }}%
+      </span>
     }
 
     <!-- Navigation Arrows -->
     @if (images().length > 1) {
-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--prev position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="prevImage()" aria-label="Previous image">
-      <i class="fa-solid fa-chevron-left"></i>
-    </button>
+      <button
+        type="button"
+        class="product-carousel__nav-btn product-carousel__nav-btn--prev position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
+        (click)="prevImage()"
+        aria-label="Previous image"
+      >
+        <i class="fa-solid fa-chevron-left"></i>
+      </button>
 
-    <button type="button"
-      class="product-carousel__nav-btn product-carousel__nav-btn--next position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
-      (click)="nextImage()" aria-label="Next image">
-      <i class="fa-solid fa-chevron-right"></i>
-    </button>
+      <button
+        type="button"
+        class="product-carousel__nav-btn product-carousel__nav-btn--next position-absolute top-50 translate-middle-y border-0 p-0 d-flex align-items-center justify-content-center"
+        (click)="nextImage()"
+        aria-label="Next image"
+      >
+        <i class="fa-solid fa-chevron-right"></i>
+      </button>
     }
   </div>
 
   <!-- Thumbnails Row -->
   @if (images().length > 1) {
-  <div class="product-carousel__thumbnails">
-    @for (image of images(); track image; let idx = $index) {
-    <button type="button" class="product-carousel__thumbnail border-0 p-0  overflow-hidden bg-light"
-      [class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)"
-      [attr.aria-label]="'Select image ' + (idx + 1)">
-      <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
-    </button>
-    }
-  </div>
+    <div class="product-carousel__thumbnails">
+      @for (image of images(); track image; let idx = $index) {
+        <button
+          type="button"
+          class="product-carousel__thumbnail border-0 p-0 overflow-hidden bg-light"
+          [class.product-carousel__thumbnail--active]="idx === activeIndex()"
+          (click)="selectImage(idx)"
+          [attr.aria-label]="'Select image ' + (idx + 1)"
+        >
+          <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
+        </button>
+      }
+    </div>
   }
 </div>

src/app/features/store/components/product-carousel/product-carousel.component.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'app-product-carousel',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   templateUrl: './product-carousel.component.html',
   styleUrl: './product-carousel.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductCarouselComponent {
   readonly images = input<string[]>([]);

src/app/features/store/pages/account-page/account-layout/account-layout.html

@@ -0,0 +1,6 @@
+    <div class="account-layout">
+      <app-account-sidebar class="account-sidebar"></app-account-sidebar>
+      <div class="account-content">
+        <router-outlet></router-outlet>
+      </div>
+    </div>

src/app/features/store/pages/account-page/account-layout/account-layout.scss

@@ -0,0 +1,17 @@
+.account-layout {
+  display: flex;
+  margin: 0 auto;
+  gap: 100px;
+  min-height: calc(100vh - 100px);
+}
+.account-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+}
+.account-content {
+  flex: 1;
+}
+
+label {
+  font-size: 13px !important;
+}

src/app/features/store/pages/account-page/account-layout/account-layout.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { AccountSidebar } from '../components/account-sidebar/account-sidebar';
+
+@Component({
+  selector: 'app-account-layout',
+  standalone: true,
+  imports: [RouterOutlet, AccountSidebar],
+  templateUrl: './account-layout.html',
+  styleUrl: './account-layout.scss',
+})
+export class AccountLayout {}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html

@@ -0,0 +1,8 @@
+    <div class="sidebar-container">
+      <h2 class="sidebar-title">MI CUENTA</h2>
+      <div class="divider"></div>
+      <nav class="sidebar-nav">
+        <a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
+        <a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
+      </nav>
+    </div>

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss

@@ -0,0 +1,34 @@
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #1a1a1a;
+  margin-bottom: 12px;
+}
+.divider {
+  height: 1px;
+  background-color: #e0e0e0;
+  margin-bottom: 20px;
+}
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.nav-link {
+  text-decoration: none;
+  color: #888;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+.nav-link:hover {
+  color: #5a5a5a;
+}
+.nav-link.active {
+  color: var(--color-primary); /* Blue color matching the image */
+  font-weight: 600;
+}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-account-sidebar',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './account-sidebar.html',
+  styleUrl: './account-sidebar.scss',
+})
+export class AccountSidebar {}

src/app/features/store/pages/account-page/components/profile-form/profile-form.html

@@ -0,0 +1,66 @@
+<form [formGroup]="profileForm" class="profile-form" (ngSubmit)="onSubmit()">
+  <div class="form-group">
+    <label>Nombre y Apellido:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['fullName'].value"
+      (valueChange)="profileForm.controls['fullName'].setValue($event)"
+    ></app-input>
+    @if (getControlError('fullName'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Email:</label>
+    <app-input
+      type="email"
+      [value]="profileForm.controls['email'].value"
+      (valueChange)="profileForm.controls['email'].setValue($event)"
+    ></app-input>
+    @if (getControlError('email'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>DNI:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['dni'].value"
+      (valueChange)="profileForm.controls['dni'].setValue($event)"
+    ></app-input>
+    @if (getControlError('dni'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Teléfono:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['phone'].value"
+      (valueChange)="profileForm.controls['phone'].setValue($event)"
+    ></app-input>
+    @if (getControlError('phone'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Contraseña (dejar en blanco para no modificar):</label>
+    <app-input
+      type="password"
+      [value]="profileForm.controls['password'].value"
+      (valueChange)="profileForm.controls['password'].setValue($event)"
+    ></app-input>
+    @if (getControlError('password'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-actions mt-3">
+    <app-button type="button" variant="cancel" hostClass="action-btn" buttonClass="w-100" (click)="onCancel()">Cancelar</app-button>
+    <app-button type="submit" variant="primary" hostClass="action-btn" buttonClass="w-100" [disabled]="isSubmitting()">Guardar</app-button>
+  </div>
+</form>

src/app/features/store/pages/account-page/components/profile-form/profile-form.scss

@@ -0,0 +1,15 @@
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+.action-btn {
+  flex: 1;
+  display: block;
+}

src/app/features/store/pages/account-page/components/profile-form/profile-form.ts

@@ -0,0 +1,105 @@
+import { Component, inject, effect, signal, OnInit } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+import { AuthService } from '../../../../../../core/services/auth/auth.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+
+@Component({
+  selector: 'app-profile-form',
+  standalone: true,
+  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
+  templateUrl: './profile-form.html',
+  styleUrl: './profile-form.scss',
+})
+export class ProfileForm implements OnInit {
+  profileForm: FormGroup;
+  private authService = inject(AuthService);
+  private toastService = inject(ToastService);
+  isSubmitting = signal(false);
+
+  constructor(private fb: FormBuilder) {
+    this.profileForm = this.fb.group({
+      fullName: ['', [Validators.required, Validators.maxLength(255)]],
+      email: ['', [Validators.required, Validators.email, Validators.maxLength(255)]],
+      dni: ['', [Validators.pattern(/^[0-9]{7,8}$/)]],
+      phone: ['', [Validators.pattern(/^\+?[0-9\s\-]{10,20}$/)]],
+      password: ['', [Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/)]]
+    });
+
+    effect(() => {
+      const user = this.authService.user();
+      if (user) {
+        this.profileForm.patchValue({
+          fullName: user.nombre_apellido,
+          email: user.email,
+          dni: user.dni || '',
+          phone: user.telefono || ''
+        });
+      }
+    });
+  }
+
+  ngOnInit() {
+    // Refresh user data directly from the API to ensure consistency
+    this.authService.loadCurrentUser().subscribe();
+  }
+
+  getControlError(controlName: string): string | null {
+    const control = this.profileForm.get(controlName);
+    if (!control || !control.errors || (!control.touched && !this.isSubmitting())) return null;
+
+    if (control.errors['required']) return 'Este campo es obligatorio.';
+    if (control.errors['email']) return 'Ingresa un email válido.';
+    if (control.errors['maxlength']) return 'Excede el largo máximo.';
+    if (controlName === 'dni' && control.errors['pattern']) return 'DNI inválido (7-8 números).';
+    if (controlName === 'phone' && control.errors['pattern']) return 'Teléfono inválido.';
+    if (controlName === 'password' && control.errors['pattern']) return 'Debe contener mayúscula, minúscula, carácter especial y mínimo 8 caracteres.';
+    
+    return 'Valor inválido.';
+  }
+
+  onSubmit() {
+    if (this.profileForm.invalid) {
+      this.profileForm.markAllAsTouched();
+      return;
+    }
+    
+    this.isSubmitting.set(true);
+    const formValue = this.profileForm.value;
+    const payload: any = {
+      nombre_apellido: formValue.fullName,
+      email: formValue.email,
+    };
+    if (formValue.dni) payload.dni = formValue.dni;
+    if (formValue.phone) payload.telefono = formValue.phone;
+    if (formValue.password) payload.password = formValue.password;
+
+    this.authService.updateProfile(payload).subscribe({
+      next: () => {
+        this.isSubmitting.set(false);
+        this.toastService.success('Perfil actualizado correctamente.');
+      },
+      error: (error: any) => {
+        this.isSubmitting.set(false);
+        const errorMessage = error.error?.message || 'Error al actualizar el perfil.';
+        this.toastService.danger(errorMessage);
+      }
+    });
+  }
+
+  onCancel() {
+    const user = this.authService.user();
+    if (user) {
+      this.profileForm.reset({
+        fullName: user.nombre_apellido,
+        email: user.email,
+        dni: user.dni || '',
+        phone: user.telefono || '',
+        password: ''
+      });
+    } else {
+      this.profileForm.reset();
+    }
+  }
+}

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html

@@ -0,0 +1,50 @@
+<article class="w-100 py-3 rounded-0 cart-item">
+  <div class="position-relative overflow-hidden cart-item-media">
+    @if (item.discountPercentage) {
+      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ item.discountPercentage }}%</span>
+    }
+
+    @if (item.imageUrl) {
+      <img class="w-100 h-100 object-fit-cover d-block" [src]="item.imageUrl" [alt]="item.title" />
+    } @else {
+      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
+    }
+  </div>
+
+  <div class="d-flex flex-column justify-content-between w-100 h-100 py-1 cart-item-content">
+    <div class="d-grid cart-item-top-row align-items-start">
+      <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ item.title }}</h3>
+
+      <div class="cart-item-prices">
+        @if (item.originalPrice) {
+          <span class="text-decoration-line-through cart-item-original-price">$ {{ item.originalPrice }}</span>
+        }
+        <span class="fw-bold cart-item-discounted-price">$ {{ item.price }}</span>
+      </div>
+    </div>
+
+    <div
+      class="d-grid cart-item-attributes"
+      [class.cart-item-attributes--quantity-only]="item.attributes.length === 0"
+    >
+      <div class="cart-item-attribute">
+        <span class="cart-item-attribute-label">Cantidad: </span>
+        <span class="fw-bold">{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span>
+      </div>
+
+      @for (attribute of item.attributes; track attribute.label + attribute.value) {
+        <div class="cart-item-attribute">
+          <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
+          <span class="fw-bold">{{ attribute.value }}</span>
+        </div>
+      }
+    </div>
+
+    @if (item.transferPrice) {
+      <div class="cart-item-transfer-price">
+        <span class="cart-item-price-label">Precio por transferencia</span>
+        <span class="fw-bold">${{ item.transferPrice }}</span>
+      </div>
+    }
+  </div>
+</article>

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss

@@ -0,0 +1,118 @@
+:host {
+  display: block;
+  border-bottom: 1px solid #dddddd;
+}
+
+:host(:last-child) {
+  border-bottom: none;
+}
+
+.cart-item {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 0.75rem;
+  background-color: transparent;
+  position: relative;
+}
+
+.cart-item-media {
+  width: 120px;
+  aspect-ratio: 4 / 3;
+  border-radius: 5px 0 0 5px;
+  background-color: #ffffff;
+  border: 1px solid #eaeaea;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.cart-item-discount-badge {
+  width: 44px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-right-radius: 4px;
+  background-color: var(--bs-primary, #5b75ff);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.cart-item-placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
+}
+
+.cart-item-content {
+  gap: 0.5rem;
+}
+
+.cart-item-top-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+}
+
+.cart-item-product {
+  color: #666666;
+  font-size: 10px;
+  line-height: 1.25;
+  font-weight: 325;
+}
+
+.cart-item-prices {
+  display: grid;
+  justify-items: end;
+  line-height: 1.1;
+}
+
+.cart-item-original-price {
+  color: #a0a0a0;
+  font-size: 9px;
+  font-weight: 325;
+}
+
+.cart-item-discounted-price {
+  color: var(--bs-primary, #5b75ff);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.cart-item-price-label {
+  color: #a0a0a0;
+  font-size: 9px;
+  font-weight: 325;
+}
+
+.cart-item-attributes {
+  gap: 0.125rem;
+
+  &--quantity-only {
+    flex: 1;
+    align-content: center;
+  }
+}
+
+.cart-item-attribute {
+  color: #666666;
+  font-size: 9px;
+  line-height: 1.2;
+}
+
+.cart-item-attribute-label {
+  font-weight: 325;
+}
+
+.cart-item-transfer-price {
+  color: #666666;
+  font-size: 9px;
+  line-height: 1.2;
+  display: grid;
+  justify-items: end;
+}

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+export type PurchaseItemViewModel = {
+  id: number;
+  title: string;
+  imageUrl: string | null;
+  quantity: number;
+  attributes: Array<{
+    label: string;
+    value: string | null;
+  }>;
+  price: string;
+  originalPrice?: string | null;
+  transferPrice?: string | null;
+  discountPercentage?: string | number | null;
+};
+
+@Component({
+  selector: 'app-purchase-item',
+  standalone: true,
+  imports: [],
+  templateUrl: './purchase-item.html',
+  styleUrl: './purchase-item.scss',
+})
+export class PurchaseItem {
+  @Input() item!: PurchaseItemViewModel;
+}

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html

@@ -0,0 +1,11 @@
+    <div class="purchase-item" [routerLink]="[purchase.id]" style="cursor: pointer;">
+      <div class="purchase-info">
+        <span class="purchase-id">Compra {{ purchase.id }}.</span>
+        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+      </div>
+      <div class="purchase-action">
+        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
+          <path d="M1 1L7 7L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss

@@ -0,0 +1,37 @@
+.purchase-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding:  16px;
+  padding-left:0;
+  transition: box-shadow 0.2s, border-radius 0.2s;
+  cursor: pointer;
+}
+.purchase-item:hover {
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07);
+  border-radius: 8px;
+}
+.purchase-item:hover .arrow-icon {
+  color: #5b75ff; /* Blue on hover */
+}
+.purchase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.purchase-id {
+  font-weight: bold;
+  color: #666666;
+  font-size: 13px;
+}
+.purchase-date {
+  font-weight: 325;
+  color: #666666;
+  font-size: 10px;
+}
+.arrow-icon {
+  width: 8px;
+  height: 14px;
+  color: #888;
+  transition: color 0.2s;
+}

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-purchase-list-item',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './purchase-list-item.html',
+  styleUrl: './purchase-list-item.scss',
+})
+export class PurchaseListItem {
+  @Input() purchase!: { id: number; date: string };
+}
+

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html

@@ -0,0 +1,29 @@
+    <div class="purchase-list-container">
+      <ng-container *ngIf="isLoading(); else contentTpl">
+        <!-- Skeleton -->
+        <div class="skeleton-item" *ngFor="let i of [1, 2, 3, 4]">
+          <div class="skeleton-info">
+            <div class="skeleton-id"></div>
+            <div class="skeleton-date"></div>
+          </div>
+          <div class="skeleton-action"></div>
+        </div>
+      </ng-container>
+
+      <ng-template #contentTpl>
+        <ng-container *ngIf="purchases().length > 0; else emptyTpl">
+          <ng-container *ngFor="let purchase of purchases(); let last = last">
+            <app-purchase-list-item 
+              [purchase]="purchase">
+            </app-purchase-list-item>
+            <div class="purchase-divider" *ngIf="!last"></div>
+          </ng-container>
+        </ng-container>
+      </ng-template>
+
+      <ng-template #emptyTpl>
+        <div class="empty-state">
+          Aún no hay compras realizadas
+        </div>
+      </ng-template>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss

@@ -0,0 +1,73 @@
+.purchase-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.purchase-divider {
+  height: 1px;
+  background-color: #DDDDDD;
+  width: 100%;
+}
+
+.empty-state {
+  padding: 2rem 0;
+  text-align: center;
+  color: #666;
+  font-size: 1rem;
+}
+
+/* Skeleton */
+.skeleton-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.skeleton-item:last-child {
+  border-bottom: none;
+}
+
+.skeleton-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-id {
+  width: 100px;
+  height: 1rem;
+  background-color: #EEEEEE;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.skeleton-date {
+  width: 150px;
+  height: 0.8rem;
+  background-color: #EEEEEE;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.skeleton-action {
+  width: 24px;
+  height: 24px;
+  background-color: #EEEEEE;
+  border-radius: 50%;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: #EEEEEE;
+  }
+  50% {
+    background-color: #E0E0E0;
+  }
+  100% {
+    background-color: #EEEEEE;
+  }
+}

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PurchaseListItem } from '../purchase-list-item/purchase-list-item';
+import { CheckoutService, PurchaseSummaryResponse } from '../../../../../../core/services/checkout.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+
+type PurchaseListViewModel = {
+  id: number;
+  date: string;
+};
+
+@Component({
+  selector: 'app-purchase-list',
+  standalone: true,
+  imports: [CommonModule, PurchaseListItem],
+  templateUrl: './purchase-list.html',
+  styleUrl: './purchase-list.scss',
+})
+export class PurchaseList implements OnInit {
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly toastService = inject(ToastService);
+  private readonly tenantService = inject(TenantService);
+
+  purchases = signal<PurchaseListViewModel[]>([]);
+  isLoading = signal<boolean>(true);
+
+  async ngOnInit(): Promise<void> {
+    try {
+      const tenantCode = this.tenantService.tenant()?.codigo || '';
+      
+      const response = await this.checkoutService.getPurchases(tenantCode, 'paid');
+      const mappedPurchases = response.data.map((purchase: PurchaseSummaryResponse) => ({
+        id: purchase.id,
+        date: this.formatDate(purchase.created_at),
+      }));
+      this.purchases.set(mappedPurchases);
+    } catch (error) {
+      this.toastService.danger('Hubo un error al cargar las compras');
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">DATOS PERSONALES</h2>
+      <app-profile-form></app-profile-form>
+    </div>

src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss

@@ -0,0 +1,13 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+  margin-bottom: 24px;
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ProfileForm } from '../../components/profile-form/profile-form';
+
+@Component({
+  selector: 'app-profile-page',
+  standalone: true,
+  imports: [ProfileForm],
+  templateUrl: './profile-page.html',
+  styleUrl: './profile-page.scss',
+})
+export class ProfilePage {}

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html

@@ -0,0 +1,33 @@
+<div class="page-container">
+  <div class="d-flex align-items-center mb-4">
+    <a routerLink="../" class="text-decoration-none " >
+      <i class="bi bi-arrow-left fs-5"></i>
+    </a>
+    <h2 class="page-title m-0">MIS COMPRAS</h2>
+  </div>
+
+  @if (isLoading()) {
+    <p class="purchase-loading">Cargando detalle de compra...</p>
+  } @else if (purchase(); as purchase) {
+    <div class="d-flex justify-content-between align-items-center mb-4 pb-3" style="border-bottom: 1px solid #dddddd;">
+      <div class="purchase-info">
+        <span class="purchase-id">Compra {{ purchase.id }}.</span>
+        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+      </div>
+      <div class="purchase-total ">
+        <span class="purchase-total-label">Total:</span>
+        <span class="purchase-total-value">${{ purchase.total }}</span>
+      </div>
+    </div>
+
+    <p style="font-size: 12px; color: #666666; margin:0;">Productos:</p>
+
+    <div class="d-flex flex-column">
+      @for (item of purchase.items; track item.id) {
+        <app-purchase-item [item]="item"></app-purchase-item>
+      } @empty {
+        <p class="purchase-empty">No hay productos para mostrar en esta compra.</p>
+      }
+    </div>
+  }
+</div>

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss

@@ -0,0 +1,51 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+}
+
+.purchase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.purchase-id {
+  font-weight: bold;
+  color: #666666;
+  font-size: 13px;
+}
+.purchase-date {
+  font-weight: 325;
+  color: #666666;
+  font-size: 10px;
+}
+
+.purchase-total {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.purchase-total-label {
+  font-size: 17px;
+  color: #666666;
+  font-weight: 325;
+}
+.purchase-total-value {
+  color: var(--bs-primary, #5b75ff);
+  font-weight: bold;
+  font-size: 17px;
+}
+
+.purchase-loading,
+.purchase-empty {
+  color: #666666;
+  font-size: 12px;
+  margin: 0;
+}

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts

@@ -0,0 +1,95 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+import { CheckoutService, PurchaseDetailResponse } from '../../../../../../core/services/checkout.service';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
+
+type PurchaseDetailViewModel = {
+  id: number;
+  date: string;
+  total: string;
+  items: PurchaseItemViewModel[];
+};
+
+@Component({
+  selector: 'app-purchase-detail-page',
+  standalone: true,
+  imports: [CommonModule, RouterLink, PurchaseItem],
+  templateUrl: './purchase-detail-page.html',
+  styleUrl: './purchase-detail-page.scss',
+})
+export class PurchaseDetailPage implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
+
+  readonly isLoading = signal(true);
+  readonly purchase = signal<PurchaseDetailViewModel | null>(null);
+
+  async ngOnInit(): Promise<void> {
+    const purchaseId = this.route.snapshot.paramMap.get('id');
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      void this.router.navigate(['/mi-cuenta/compras']);
+      return;
+    }
+
+    try {
+      const response = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
+
+      this.purchase.set({
+        id: response.id,
+        date: this.formatDate(response.created_at),
+        total: response.total,
+        items: this.mapItems(response),
+      });
+    } catch (error) {
+      console.error('Failed to fetch purchase detail:', error);
+      this.toastService.danger('Hubo un error al cargar el detalle de la compra');
+      void this.router.navigate(['/mi-cuenta/compras']);
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
+
+  private mapItems(purchase: PurchaseDetailResponse): PurchaseItemViewModel[] {
+    return purchase.items.map((item) => ({
+      id: item.id,
+      title: item.product?.nombre ?? 'Producto sin nombre',
+      imageUrl: item.product?.imagen ?? null,
+      quantity: item.quantity,
+      attributes: (item.variant?.attributes ?? []).map((attribute) => ({
+        label: attribute.name,
+        value: attribute.value,
+      })),
+      price: item.line_total,
+      originalPrice: null,
+      transferPrice: null,
+      discountPercentage: null,
+    }));
+  }
+}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">MIS COMPRAS</h2>
+      <app-purchase-list></app-purchase-list>
+    </div>

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss

@@ -0,0 +1,12 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { PurchaseList } from '../../components/purchase-list/purchase-list';
+
+@Component({
+  selector: 'app-purchases-page',
+  standalone: true,
+  imports: [PurchaseList],
+  templateUrl: './purchases-page.html',
+  styleUrl: './purchases-page.scss',
+})
+export class PurchasesPage {}

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

@@ -0,0 +1,95 @@
+<form
+  class="checkout-form"
+  novalidate
+  [formGroup]="form()"
+  (ngSubmit)="submit()"
+>
+  <div class="checkout-form__fields">
+    <div class="form-group">
+      <label for="checkout-nombre">
+        Nombre y Apellido <span class="required" aria-hidden="true">*</span>
+      </label>
+      <app-input
+        id="checkout-nombre"
+        type="text"
+        [value]="form().controls.nombre.value"
+        [invalid]="showControlError('nombre')"
+        [disabled]="form().controls.nombre.disabled"
+        (valueChange)="updateField('nombre', $event)"
+      />
+      @if (getControlError('nombre'); as errorMessage) {
+        <small class="error">{{ errorMessage }}</small>
+      }
+    </div>
+
+    <div class="form-group">
+      <label for="checkout-email">
+        Email <span class="required" aria-hidden="true">*</span>
+      </label>
+      <app-input
+        id="checkout-email"
+        type="email"
+        [value]="form().controls.email.value"
+        [invalid]="showControlError('email')"
+        [disabled]="form().controls.email.disabled"
+        (valueChange)="updateField('email', $event)"
+      />
+      @if (getControlError('email'); as errorMessage) {
+        <small class="error">{{ errorMessage }}</small>
+      }
+    </div>
+
+    <div class="form-group">
+      <label for="checkout-dni">
+        DNI <span class="required" aria-hidden="true">*</span>
+      </label>
+      <app-input
+        id="checkout-dni"
+        type="text"
+        [value]="form().controls.dni.value"
+        [invalid]="showControlError('dni')"
+        [disabled]="form().controls.dni.disabled"
+        (valueChange)="updateField('dni', $event)"
+      />
+      @if (getControlError('dni'); as errorMessage) {
+        <small class="error">{{ errorMessage }}</small>
+      }
+    </div>
+
+    <div class="form-group">
+      <label for="checkout-telefono">
+        Telefono <span class="required" aria-hidden="true">*</span>
+      </label>
+      <app-input
+        id="checkout-telefono"
+        type="text"
+        [value]="form().controls.telefono.value"
+        [invalid]="showControlError('telefono')"
+        [disabled]="form().controls.telefono.disabled"
+        (valueChange)="updateField('telefono', $event)"
+      />
+      @if (getControlError('telefono'); as errorMessage) {
+        <small class="error">{{ errorMessage }}</small>
+      }
+    </div>
+  </div>
+
+  <div class="checkout-form__actions">
+    <app-button
+      type="button"
+      variant="cancel"
+      hostClass="checkout-form__action-btn"
+      buttonClass="w-100"
+      (click)="cancelStep.emit()"
+    >
+      Cancelar
+    </app-button>
+    <app-button
+      type="submit"
+      hostClass="checkout-form__action-btn"
+      buttonClass="w-100"
+    >
+      Continuar
+    </app-button>
+  </div>
+</form>

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

@@ -0,0 +1,25 @@
+.checkout-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  &__fields {
+    display: grid;
+    gap: 1.25rem;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 0.5rem;
+  }
+
+  &__action-btn {
+    display: block;
+    width: 100%;
+    flex: 1 1 290px;
+    max-width: 290px;
+  }
+}

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

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { InputComponent } from '../../../../shared/components/input/input.component';
+import { CheckoutForm } from './checkout-page.models';
+
+@Component({
+  selector: 'app-checkout-data-step',
+  standalone: true,
+  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
+  templateUrl: './checkout-data-step.component.html',
+  styleUrl: './checkout-data-step.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutDataStepComponent {
+  readonly form = input.required<CheckoutForm>();
+  readonly cancelStep = output<void>();
+  readonly continueStep = output<void>();
+
+  protected updateField(field: keyof CheckoutForm['controls'], value: string | number): void {
+    this.form().controls[field].setValue(String(value));
+  }
+
+  protected showControlError(controlName: keyof CheckoutForm['controls']): boolean {
+    const control = this.form().controls[controlName];
+    return control.invalid && control.touched;
+  }
+
+  protected getControlError(controlName: keyof CheckoutForm['controls']): string | null {
+    const control = this.form().controls[controlName];
+    if (!this.showControlError(controlName)) return null;
+    if (control.hasError('required')) return 'Este campo es obligatorio.';
+    if (control.hasError('email')) return 'Ingresa un email valido.';
+    return 'El valor ingresado no es valido.';
+  }
+
+  protected submit(): void {
+    const form = this.form();
+    if (form.invalid) {
+      form.markAllAsTouched();
+      return;
+    }
+
+    this.continueStep.emit();
+  }
+}

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

@@ -0,0 +1,40 @@
+
+  <div class="checkout-page">
+    <div class="checkout-page__stepper-col ">
+      <app-stepper #stepper>
+        <app-step label="Datos" [isValid]="isStep1Valid()">
+          <app-checkout-data-step
+            [form]="form"
+            (cancelStep)="onCancel()"
+            (continueStep)="onStep1Continue()"
+          />
+        </app-step>
+
+        <app-step label="Pago">
+          <app-checkout-payment-step
+            [paymentMethods]="paymentMethods"
+            [selectedPaymentMethod]="selectedPaymentMethod()"
+            [copiedTransferField]="copiedTransferField()"
+            [transferAccount]="transferAccount()"
+            [isGeneratingIntent]="isPaymentLoading()"
+            [qrData]="qrData()"
+            (paymentMethodChange)="selectPaymentMethod($event)"
+            (copyTransferValue)="copyTransferValue($event.field, $event.value)"
+            (cancelStep)="onCancel()"
+            (generateTransferIntent)="generateTransferIntent($event)"
+            (complete)="onComplete()"
+          />
+        </app-step>
+      </app-stepper>
+    </div>
+
+    <div class="checkout-page__cart-col">
+      <app-cart
+        [items]="mappedCartItems()"
+        [subtotal]="cartSubtotal()"
+        [discount]="cartDiscount()"
+        [total]="cartTotal()"
+        backgroundColor="transparent"
+      />
+    </div>
+  </div>

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

@@ -0,0 +1,24 @@
+.checkout-page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 420px;
+  gap: 4rem;
+  align-items: start;
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+  }
+
+  &__stepper-col {
+    min-width: 0;
+    border-radius: 4px;
+    min-height: 420px;
+  }
+
+  &__cart-col {
+
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,306 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  OnInit,
+  signal,
+  untracked,
+  ViewChild,
+} from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { startWith } from 'rxjs';
+
+import { CartService } from '../../../../core/services/cart/cart.service';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { CheckoutService, CreatePurchasePayload } from '../../../../core/services/checkout.service';
+import { AuthService } from '../../../../core/services/auth/auth.service';
+import { BankAccount } from '../../../../core/services/tenant.interface';
+import { CartItem } from '../../../../core/services/cart/cart.interface';
+import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
+import { StepComponent } from '../../../../shared/components/stepper/step.component';
+import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
+import { CheckoutDataStepComponent } from './checkout-data-step.component';
+import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
+import {
+  CheckoutForm,
+  PaymentMethod,
+  PaymentMethodOption,
+  TransferAccount,
+  TransferField,
+} from './checkout-page.models';
+
+@Component({
+  selector: 'app-checkout-page',
+  standalone: true,
+  imports: [
+    CartComponent,
+    StepperComponent,
+    StepComponent,
+    CheckoutDataStepComponent,
+    CheckoutPaymentStepComponent,
+  ],
+  templateUrl: './checkout-page.component.html',
+  styleUrl: './checkout-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckoutPageComponent implements OnInit {
+  private readonly formBuilder = inject(FormBuilder);
+  private readonly cartService = inject(CartService);
+  private readonly router = inject(Router);
+  private readonly tenantService = inject(TenantService);
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly authService = inject(AuthService);
+
+  @ViewChild(StepperComponent) stepper!: StepperComponent;
+
+  protected readonly form: CheckoutForm = this.formBuilder.nonNullable.group({
+    nombre: ['', [Validators.required]],
+    email: ['', [Validators.required, Validators.email]],
+    dni: ['', [Validators.required]],
+    telefono: ['', [Validators.required]],
+  });
+
+  protected readonly cartSubtotal = computed(() => {
+    const cart = this.cartService.cart();
+    return cart ? parseFloat(cart.subtotal) : 0;
+  });
+
+  protected readonly cartDiscount = computed(() => 0);
+
+  protected readonly cartTotal = computed(() => this.cartSubtotal() - this.cartDiscount());
+
+  protected readonly mappedCartItems = computed<CartItemMock[]>(() => {
+    const cart = this.cartService.cart();
+    if (!cart || !cart.items) return [];
+    return cart.items.map((item) => this.mapCartItemToMock(item));
+  });
+
+  protected readonly isStep1Valid = signal(this.form.valid);
+  protected readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
+    { id: 'qr', label: 'QR' },
+    { id: 'transfer', label: 'Transferencia' },
+    { id: 'telepagos', label: 'TelePagos' },
+  ];
+  protected readonly selectedPaymentMethod = signal<PaymentMethod>('qr');
+  protected readonly copiedTransferField = signal<TransferField | null>(null);
+  protected readonly transferAccount = signal<TransferAccount | null>(null);
+
+  protected readonly isCreatingPurchase = signal(false);
+  protected readonly createdPurchaseId = signal<number | null>(null);
+  protected readonly isGeneratingIntent = signal(false);
+  protected readonly isPaymentLoading = computed(
+    () => this.isGeneratingIntent() || this.cartService.isUpdating(),
+  );
+  protected readonly qrData = signal<string | null>(null);
+
+  constructor() {
+    effect(() => {
+      // We only want to trigger the intent generation when the cart changes.
+      // So we track the cart, but untrack the other signals to prevent duplicate calls.
+      const cart = this.cartService.cart();
+
+      untracked(() => {
+        const purchaseId = this.createdPurchaseId();
+        if (cart && purchaseId) {
+          // Trigger payment intent generation when cart changes and we are on the payment step
+          void this.selectPaymentMethod(this.selectedPaymentMethod());
+        }
+      });
+    });
+
+    this.form.statusChanges
+      .pipe(startWith(this.form.status))
+      .subscribe(() => this.isStep1Valid.set(this.form.valid));
+
+    const user = this.authService.user();
+    if (user) {
+      this.form.patchValue({
+        nombre: user.nombre_apellido,
+        email: user.email,
+        dni: user.dni ?? '',
+        telefono: user.telefono ?? '',
+      });
+      this.form.controls.nombre.disable();
+      this.form.controls.email.disable();
+    }
+  }
+
+  ngOnInit(): void {
+    this.cartService.loadCart().subscribe();
+  }
+
+  private mapCartItemToMock(item: CartItem): CartItemMock {
+    const fullName = item.product?.nombre ?? '';
+    let product = fullName;
+    let attributes: { label: string; value: string }[] = [];
+
+    const match = fullName.match(/^(.*?)\s*\((.*?)\)$/);
+    if (match) {
+      product = match[1];
+      const attributesString = match[2];
+      attributes = attributesString.split(',').map((attr) => {
+        const parts = attr.split(':');
+        if (parts.length === 2) {
+          return { label: parts[0].trim(), value: parts[1].trim() };
+        }
+        return { label: '', value: attr.trim() };
+      });
+    }
+
+    return {
+      cartItemId: item.id,
+      imageUrl: item.product?.imagen ?? null,
+      product,
+      originalPrice: null,
+      discountedPrice: parseFloat(item.precio_unitario),
+      discountPercentage: null,
+      attributes,
+      quantity: item.cantidad,
+    };
+  }
+
+  protected async onStep1Continue(): Promise<void> {
+    if (this.form.invalid) return;
+
+    const tenant = this.tenantService.tenant();
+    if (!tenant) return;
+
+    this.isCreatingPurchase.set(true);
+
+    try {
+      const cart = this.cartService.cart();
+      if (!cart?.id) {
+        throw new Error('No hay un carrito activo para finalizar la compra.');
+      }
+
+      const formValue = this.form.getRawValue();
+      const payload: CreatePurchasePayload = {
+        cart_id: cart.id,
+        dni: formValue.dni,
+        telefono: formValue.telefono,
+        email: formValue.email,
+        nombre_apellido: formValue.nombre,
+      };
+
+      const response = await this.checkoutService.createPurchase(tenant.codigo, payload);
+      this.createdPurchaseId.set(response.id);
+
+      this.stepper.next();
+
+      // Auto trigger intent for default option
+      void this.selectPaymentMethod(this.selectedPaymentMethod());
+    } catch (error) {
+      console.error('Failed to create purchase:', error);
+      // Here we could show an alert or toast
+    } finally {
+      this.isCreatingPurchase.set(false);
+    }
+  }
+
+  protected onCancel(): void {
+    void this.router.navigate(['/']);
+  }
+
+  protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
+    this.selectedPaymentMethod.set(method);
+
+    const purchaseId = this.createdPurchaseId();
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant || method === 'telepagos') {
+      return;
+    }
+
+    if (method === 'transfer') {
+      this.transferAccount.set(null);
+      return;
+    }
+
+    this.isGeneratingIntent.set(true);
+
+    try {
+      const response = await this.checkoutService.generatePaymentIntent(
+        tenant.codigo,
+        purchaseId,
+        method,
+      );
+
+      if (method === 'qr' && response.qr_data?.qr_code) {
+        this.qrData.set(response.qr_data.qr_code);
+      }
+    } catch (error) {
+      console.error('Failed to generate payment intent:', error);
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
+
+  protected async generateTransferIntent(dni: string): Promise<void> {
+    const purchaseId = this.createdPurchaseId();
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      return;
+    }
+
+    this.isGeneratingIntent.set(true);
+    try {
+      const response = await this.checkoutService.generatePaymentIntent(
+        tenant.codigo,
+        purchaseId,
+        'transfer',
+        dni
+      );
+
+      if (response.transfer_data) {
+        this.transferAccount.set({
+          titular: response.transfer_data.titular,
+          entidad: response.transfer_data.entidad,
+          cvu: response.transfer_data.cvu,
+          alias: response.transfer_data.alias,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to generate transfer payment intent:', error);
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
+
+  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);
+    }
+  }
+
+  protected async onComplete(): Promise<void> {
+    const purchaseId = this.createdPurchaseId();
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      return;
+    }
+
+    try {
+      await this.checkoutService.completePurchase(tenant.codigo, purchaseId);
+      this.cartService.clearCart();
+      void this.router.navigate(['/checkout/status', purchaseId]);
+    } catch (error) {
+      console.error('Failed to complete purchase:', error);
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { FormControl, FormGroup } from '@angular/forms';
+
+export type PaymentMethod = 'qr' | 'transfer' | 'telepagos';
+export type TransferField = 'cvu' | 'alias';
+
+export interface PaymentMethodOption {
+  id: PaymentMethod;
+  label: string;
+}
+
+export interface TransferAccount {
+  titular: string;
+  entidad: string;
+  cvu: string;
+  alias: string;
+}
+
+export type CheckoutForm = FormGroup<{
+  nombre: FormControl<string>;
+  email: FormControl<string>;
+  dni: FormControl<string>;
+  telefono: FormControl<string>;
+}>;

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

@@ -0,0 +1,58 @@
+<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 d-flex justify-content-end" aria-live="polite">
+      @if (isGeneratingIntent()) {
+        <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
+          <h3 class="payment-panel__title">Cargando información de pago...</h3>
+        </div>
+      } @else if (selectedPaymentMethod() === 'qr') {
+        <app-checkout-payment-qr [qrData]="qrData()" />
+      } @else if (selectedPaymentMethod() === 'transfer') {
+        <app-checkout-payment-transfer
+          [transferAccount]="transferAccount()"
+          [copiedTransferField]="copiedTransferField()"
+          (copyTransferValue)="requestCopy($event.field, $event.value)"
+          (submitDni)="generateTransferIntent.emit($event)"
+          (completePurchase)="complete.emit()"
+        />
+      } @else {
+        <app-checkout-payment-telepagos />
+      }
+    </section>
+  </div>
+</div>
+

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

@@ -0,0 +1,138 @@
+.checkout-payment {
+  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;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+
+  &__action-btn {
+    width: 100%;
+    flex: 1 1 320px;
+    max-width: 320px;
+    display: block;
+  }
+}
+
+.payment-methods {
+  min-width: 0;
+
+  &__title {
+    margin: 0 0 1.75rem;
+    color: #8a8a8a;
+    font-size: 13px;
+    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;
+  width: 100%;
+  max-width: 300px;
+  justify-self: start;
+  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: 13px;
+    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 {
+    width: 100%;
+    max-width: 320px;
+    min-height: 269px;
+    padding: 1.5rem 1.75rem;
+    border-radius: 5px;
+    background: #ffffff;
+    color: #666666;
+    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: #8a8a8a;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+}
+

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

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { CheckoutPaymentQrComponent } from './components/checkout-payment-qr/checkout-payment-qr.component';
+import { CheckoutPaymentTelepagosComponent } from './components/checkout-payment-telepagos/checkout-payment-telepagos.component';
+import { CheckoutPaymentTransferComponent } from './components/checkout-payment-transfer/checkout-payment-transfer.component';
+import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+
+@Component({
+  selector: 'app-checkout-payment-step',
+  standalone: true,
+  imports: [ButtonComponent, CheckoutPaymentQrComponent, CheckoutPaymentTelepagosComponent, CheckoutPaymentTransferComponent],
+  templateUrl: './checkout-payment-step.component.html',
+  styleUrl: './checkout-payment-step.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutPaymentStepComponent {
+  readonly paymentMethods = input.required<ReadonlyArray<PaymentMethodOption>>();
+  readonly selectedPaymentMethod = input.required<PaymentMethod>();
+  readonly copiedTransferField = input<TransferField | null>(null);
+  readonly transferAccount = input<TransferAccount | null>(null);
+  readonly isGeneratingIntent = input<boolean>(false);
+  readonly qrData = input<string | null>(null);
+
+  readonly paymentMethodChange = output<PaymentMethod>();
+  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
+  readonly cancelStep = output<void>();
+  readonly complete = output<void>();
+  readonly generateTransferIntent = output<string>();
+
+  protected selectPaymentMethod(method: PaymentMethod): void {
+    this.paymentMethodChange.emit(method);
+  }
+
+  protected requestCopy(field: TransferField, value: string): void {
+    this.copyTransferValue.emit({ field, value });
+  }
+}

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

@@ -0,0 +1,14 @@
+<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">
+    @if (qrData()) {
+      <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
+    } @else {
+      <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>

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

@@ -0,0 +1,105 @@
+.payment-panel__card {
+  width: 100%;
+  max-width: 320px;
+  min-height: 269px;
+  padding: 1.5rem 1.75rem;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #666666;
+  box-shadow: 0 0 0 1px #f1f1f1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.payment-panel__title {
+  max-width: 18rem;
+  margin: 0;
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.payment-panel__divider {
+  width: 100%;
+  max-width: 220px;
+  height: 1px;
+  margin: 1.2rem 0 1.45rem;
+  background: #dddddd;
+}
+
+.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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  qrcode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    ::ng-deep canvas,
+    ::ng-deep img {
+      display: block !important;
+      width: 100% !important;
+      height: 100% !important;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.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;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { QRCodeComponent } from '../../../../../../shared/components/qrcode/qrcode.component';
+
+@Component({
+  selector: 'app-checkout-payment-qr',
+  standalone: true,
+  imports: [QRCodeComponent],
+  templateUrl: './checkout-payment-qr.component.html',
+  styleUrl: './checkout-payment-qr.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutPaymentQrComponent {
+  readonly qrData = input<string | null>(null);
+}

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

@@ -0,0 +1,22 @@
+<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>

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

@@ -0,0 +1,71 @@
+.payment-panel__card {
+  width: 100%;
+  max-width: 320px;
+  min-height: 269px;
+  padding: 1.5rem 1.75rem;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #666666;
+  box-shadow: 0 0 0 1px #f1f1f1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.payment-panel__title {
+  max-width: 18rem;
+  margin: 0;
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.payment-panel__divider {
+  width: 100%;
+  max-width: 220px;
+  height: 1px;
+  margin: 1.2rem 0 1.45rem;
+  background: #dddddd;
+}
+
+.store-badges {
+  width: 100%;
+  max-width: 210px;
+  display: grid;
+  gap: 0.8rem;
+}
+
+.store-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0.95rem;
+  border-radius: 0.85rem;
+  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/components/checkout-payment-telepagos/checkout-payment-telepagos.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-checkout-payment-telepagos',
+  standalone: true,
+  imports: [],
+  templateUrl: './checkout-payment-telepagos.component.html',
+  styleUrl: './checkout-payment-telepagos.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutPaymentTelepagosComponent {}

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

@@ -0,0 +1,95 @@
+<div class="payment-panel__card">
+  <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>
+      <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"
+            hostClass="w-100 h-100"
+            buttonClass="w-100 h-100 px-0"
+            [disabled]="dniControl.invalid"
+          >
+            Continuar
+          </app-button>
+        }
+      </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.scss

@@ -0,0 +1,117 @@
+.payment-panel__card {
+  width: 100%;
+  max-width: 320px;
+  min-height: 269px;
+  padding: 1.5rem 1.75rem;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #666666;
+  box-shadow: 0 0 0 1px #f1f1f1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.payment-panel__title {
+  max-width: 18rem;
+  margin: 0;
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.payment-panel__divider {
+  width: 100%;
+  max-width: 220px;
+  height: 1px;
+  margin: 1.2rem 0 1.45rem;
+  background: #dddddd;
+}
+
+.payment-panel__account {
+  width: 100%;
+  display: grid;
+  gap: 0.75rem;
+  color: #7a7a7a;
+  font-size: 12px;
+}
+
+.payment-panel__eyebrow {
+  margin: 0;
+  color: #838383;
+  font-size: 12px;
+  font-weight: 325;
+  letter-spacing: 0.06em;
+}
+
+.payment-detail {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: center;
+  gap: 0.35rem;
+  align-items: center;
+  font-size: 12px;
+
+  &--copy {
+    grid-template-columns: auto auto auto;
+  }
+
+  &__label {
+    color: #8a8a8a;
+    font-weight: 325;
+  }
+
+  &__value {
+    color: #5e5e5e;
+    font-weight: 500;
+  }
+
+  &__feedback {
+    display: block;
+    margin-top: -0.25rem;
+    color: var(--tenant-primary, #6376f3);
+    font-size: 0.78rem;
+    font-weight: 700;
+  }
+}
+
+.dni-form-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+  width: 100%;
+  padding: 1rem 0;
+}
+
+.dni-form-title {
+  color: #8a8a8a;
+  font-size: 13px;
+  font-weight: 700;
+  margin: 0 0 1.25rem 0;
+  text-align: center;
+}
+
+.dni-form {
+  width: 100%;
+  margin: 0;
+
+  app-input {
+    display: block;
+    height: 100%;
+    margin-bottom: 0;
+
+    ::ng-deep .input-control,
+    ::ng-deep input.form-control {
+      height: 100%;
+    }
+  }
+
+  ::ng-deep .btn {
+    min-width: 0 !important;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,46 @@
+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';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
+import { TransferAccount, TransferField } from '../../checkout-page.models';
+
+@Component({
+  selector: 'app-checkout-payment-transfer',
+  standalone: true,
+  imports: [IconButtonComponent, ButtonComponent, InputComponent, ReactiveFormsModule],
+  templateUrl: './checkout-payment-transfer.component.html',
+  styleUrl: './checkout-payment-transfer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CheckoutPaymentTransferComponent {
+  readonly transferAccount = input<TransferAccount | null>(null);
+  readonly copiedTransferField = input<TransferField | null>(null);
+
+  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);
+  }
+}

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

@@ -0,0 +1,111 @@
+<header class="login-page__header text-center mb-2">
+  <h1 id="login-title" class="auth-title mb-3">Iniciar sesion</h1>
+  @if (serverError(); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+</header>
+
+<form
+  class="login-page__form d-grid gap-3"
+  novalidate
+  aria-labelledby="login-title"
+  [formGroup]="form"
+  (ngSubmit)="onSubmit()"
+>
+  <div class="d-grid gap-3">
+    <label class="visually-hidden" for="login-email">Email</label>
+    <app-input
+      id="login-email"
+      type="email"
+      placeholder="Email"
+      [value]="form.controls.email.value"
+      [invalid]="showControlError('email')"
+      (valueChange)="updateEmail($event)"
+    />
+    @if (getControlError('email'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+
+    <div class="d-grid gap-1">
+      <label class="visually-hidden" for="login-password">Contraseña</label>
+      <app-input
+        id="login-password"
+        type="password"
+        placeholder="Contraseña"
+        [value]="form.controls.password.value"
+        [invalid]="showControlError('password')"
+        (valueChange)="updatePassword($event)"
+      />
+      @if (getControlError('password'); as errorMessage) {
+        <small class="text-danger">{{ errorMessage }}</small>
+      }
+      <div class="text-end">
+        <button type="button" class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none">
+          Olvide mi contraseña
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="d-grid gap-2 text-center">
+    <app-button
+      type="submit"
+      hostClass="w-100 d-block"
+      buttonClass="w-100"
+      [disabled]="isSubmitting()"
+    >
+      {{ isSubmitting() ? 'Ingresando...' : 'Ingresar' }}
+    </app-button>
+    
+    <app-button
+      type="button"
+      variant="borderless"
+      hostClass="w-100 d-block text-center"
+      buttonClass="login-page__create-account px-3 py-2"
+      [disabled]="isSubmitting()"
+      (click)="goToRegister()"
+    >
+      Crear cuenta
+    </app-button>
+  </div>
+</form>
+
+<div class="login-page__divider d-flex align-items-center justify-content-center gap-3 my-4" aria-hidden="true">
+  <span class="login-page__divider-line flex-grow-1"></span>
+  <span class="login-page__divider-dot rounded-circle border flex-shrink-0"></span>
+  <span class="login-page__divider-line flex-grow-1"></span>
+</div>
+
+<app-button
+  type="button"
+  variant="neutral-outline"
+  hostClass="w-100 d-block"
+  buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
+  [disabled]="true"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 48 48"
+    width="18"
+    height="18"
+    aria-hidden="true"
+  >
+    <path
+      fill="#FFC107"
+      d="M43.61 20.08H42V20H24v8h11.3C33.65 32.66 29.19 36 24 36c-6.63 0-12-5.37-12-12s5.37-12 12-12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C12.95 4 4 12.95 4 24s8.95 20 20 20s20-8.95 20-20c0-1.34-.14-2.65-.39-3.92z"
+    />
+    <path
+      fill="#FF3D00"
+      d="M6.31 14.69l6.57 4.82C14.66 15.1 18.96 12 24 12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C16.32 4 9.66 8.34 6.31 14.69z"
+    />
+    <path
+      fill="#4CAF50"
+      d="M24 44c5.2 0 9.9-1.99 13.47-5.23l-6.19-5.24C29.2 35.11 26.72 36 24 36c-5.17 0-9.62-3.32-11.28-7.95l-6.52 5.02C9.51 39.56 16.24 44 24 44z"
+    />
+    <path
+      fill="#1976D2"
+      d="M43.61 20.08H42V20H24v8h11.3c-.79 2.37-2.31 4.38-4.28 5.53l.01-.01l6.19 5.24C36.78 39.13 44 34 44 24c0-1.34-.14-2.65-.39-3.92z"
+    />
+  </svg>
+  <span>Continuar con Google</span>
+</app-button>

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

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+}
+
+.login-page__header {
+}
+
+.login-page__form {
+  width: 100%;
+}
+
+.login-page__forgot-password {
+  color: #a0a0a0;
+  font-size: 12px;
+  font-weight: 325;
+}
+
+.login-page__create-account {
+  min-height: 40px;
+}
+
+.login-page__divider {
+}
+
+.login-page__divider-line {
+  max-width: 18rem;
+  height: 1px;
+  background-color: #d9d9d9;
+}
+
+.login-page__divider-dot {
+  width: 16px;
+  height: 16px;
+  border-color: #d9d9d9 !important;
+  background-color: #ffffff;
+}

src/app/features/store/pages/login-page/login-page.component.spec.ts

@@ -0,0 +1,104 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter, Router } from '@angular/router';
+import { of, throwError } from 'rxjs';
+
+import { AuthService } from '../../../../core/services/auth/auth.service';
+import { LoginPageComponent } from './login-page.component';
+
+describe('LoginPageComponent', () => {
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('submits credentials and redirects to home with a full page reload on success', async () => {
+    const authService = {
+      login: vi.fn().mockReturnValue(
+        of({
+          id: 1,
+          nombre_apellido: 'Ada Lovelace',
+          email: 'ada@example.com'
+        })
+      )
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [LoginPageComponent],
+      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(LoginPageComponent);
+    const component = fixture.componentInstance as any;
+    const router = TestBed.inject(Router);
+    const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+    const redirectSpy = vi.spyOn(component, 'redirectToHome').mockImplementation(() => undefined);
+
+    component.form.setValue({
+      email: 'ada@example.com',
+      password: 'secret123'
+    });
+
+    component.onSubmit();
+
+    expect(authService.login).toHaveBeenCalledWith({
+      email: 'ada@example.com',
+      password: 'secret123'
+    });
+    expect(redirectSpy).toHaveBeenCalled();
+    expect(navigateSpy).not.toHaveBeenCalled();
+  });
+
+  it('surfaces backend login errors', async () => {
+    const authService = {
+      login: vi.fn().mockReturnValue(
+        throwError(() => ({
+          error: {
+            errors: {
+              email: ['Las credenciales son invalidas.']
+            }
+          }
+        }))
+      )
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [LoginPageComponent],
+      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(LoginPageComponent);
+    const component = fixture.componentInstance as any;
+
+    component.form.setValue({
+      email: 'ada@example.com',
+      password: 'wrong-password'
+    });
+
+    component.onSubmit();
+
+    expect(component.serverError()).toBe('Las credenciales son invalidas.');
+  });
+
+  it('validates email length and password minimum length before submit', async () => {
+    const authService = {
+      login: vi.fn()
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [LoginPageComponent],
+      providers: [provideRouter([]), { provide: AuthService, useValue: authService }]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(LoginPageComponent);
+    const component = fixture.componentInstance as any;
+
+    component.form.setValue({
+      email: `${'a'.repeat(250)}@example.com`,
+      password: '1234567'
+    });
+    component.onSubmit();
+
+    expect(authService.login).not.toHaveBeenCalled();
+    expect(component.getControlError('email')).toBe('No puede superar los 255 caracteres.');
+    expect(component.getControlError('password')).toBe('Debe tener al menos 8 caracteres.');
+  });
+});

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

@@ -0,0 +1,129 @@
+import { DOCUMENT } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { AuthService } from '../../../../core/services/auth/auth.service';
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { InputComponent } from '../../../../shared/components/input/input.component';
+
+const PASSWORD_MIN_LENGTH = 8;
+const EMAIL_MAX_LENGTH = 255;
+
+@Component({
+  selector: 'app-login-page',
+  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
+  templateUrl: './login-page.component.html',
+  styleUrl: './login-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoginPageComponent {
+  private readonly formBuilder = inject(FormBuilder);
+  private readonly router = inject(Router);
+  private readonly authService = inject(AuthService);
+  private readonly document = inject(DOCUMENT);
+
+  private readonly submittedState = signal(false);
+  private readonly serverErrorState = signal<string | null>(null);
+  private readonly isSubmittingState = signal(false);
+
+  protected readonly form = this.formBuilder.nonNullable.group({
+    email: ['', [Validators.required, Validators.email, Validators.maxLength(EMAIL_MAX_LENGTH)]],
+    password: ['', [Validators.required, Validators.minLength(PASSWORD_MIN_LENGTH)]]
+  });
+  protected readonly submitted = this.submittedState.asReadonly();
+  protected readonly serverError = this.serverErrorState.asReadonly();
+  protected readonly isSubmitting = this.isSubmittingState.asReadonly();
+
+  goToRegister(): void {
+    void this.router.navigate(['/register']);
+  }
+
+  onSubmit(): void {
+    this.submittedState.set(true);
+    this.serverErrorState.set(null);
+
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    this.isSubmittingState.set(true);
+
+    this.authService.login(this.form.getRawValue()).subscribe({
+      next: () => {
+        this.isSubmittingState.set(false);
+        this.redirectToHome();
+      },
+      error: (error: unknown) => {
+        this.isSubmittingState.set(false);
+        this.serverErrorState.set(this.resolveErrorMessage(error));
+      }
+    });
+  }
+
+  protected updateEmail(value: string | number): void {
+    this.form.controls.email.setValue(String(value));
+  }
+
+  protected updatePassword(value: string | number): void {
+    this.form.controls.password.setValue(String(value));
+  }
+
+  protected showControlError(controlName: 'email' | 'password'): boolean {
+    const control = this.form.controls[controlName];
+
+    return control.invalid && (control.touched || this.submitted());
+  }
+
+  protected getControlError(controlName: 'email' | 'password'): string | null {
+    const control = this.form.controls[controlName];
+
+    if (!this.showControlError(controlName)) {
+      return null;
+    }
+
+    if (control.hasError('required')) {
+      return 'Este campo es obligatorio.';
+    }
+
+    if (control.hasError('maxlength')) {
+      return `No puede superar los ${EMAIL_MAX_LENGTH} caracteres.`;
+    }
+
+    if (control.hasError('email')) {
+      return 'Ingresa un email valido.';
+    }
+
+    if (control.hasError('minlength')) {
+      return `Debe tener al menos ${PASSWORD_MIN_LENGTH} caracteres.`;
+    }
+
+    return 'El valor ingresado no es valido.';
+  }
+
+  protected redirectToHome(): void {
+    const homeUrl = this.router.serializeUrl(this.router.createUrlTree(['/']));
+    this.document.location.assign(homeUrl);
+  }
+
+  private resolveErrorMessage(error: unknown): string {
+    const errorPayload =
+      typeof error === 'object' && error !== null && 'error' in error
+        ? (error as { error?: { errors?: Record<string, string[]>; message?: string } }).error
+        : undefined;
+    const apiErrors = errorPayload?.errors;
+    const emailMessages = apiErrors?.['email'];
+    const emailError = Array.isArray(emailMessages) ? emailMessages[0] : null;
+
+    if (typeof emailError === 'string' && emailError.trim()) {
+      return emailError;
+    }
+
+    if (typeof errorPayload?.message === 'string' && errorPayload.message.trim()) {
+      return errorPayload.message;
+    }
+
+    return 'No se pudo iniciar sesion. Intenta nuevamente.';
+  }
+}

src/app/features/store/pages/product-detail-page/product-detail-page.component.html

@@ -1,120 +1,119 @@
-<section class="product-detail py-5">
-  <div class="container-xl px-3 px-md-4">
-    @if (loading()) {
-      <div class="text-center py-5">
-        <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Cargando...</span>
+<section class="product-detail">
+  @if (loading()) {
+    <div class="text-center py-5">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Cargando...</span>
+      </div>
+    </div>
+  } @else if (error()) {
+    <div class="alert alert-danger text-center mb-0" role="alert">
+      {{ error() }}
+    </div>
+  } @else if (product(); as prod) {
+    <div class="row g-4 g-xl-5 align-items-start">
+      <div class="col-12 col-lg-5">
+        <div #carouselHost class="product-detail__carousel">
+          <app-product-carousel [images]="carouselImages()" />
         </div>
       </div>
-    } @else if (error()) {
-      <div class="alert alert-danger text-center mb-0" role="alert">
-        {{ error() }}
-      </div>
-    } @else if (product(); as prod) {
-      <div class="row g-4 g-xl-5 align-items-start">
-        <div class="col-12 col-lg-5">
-          <div #carouselHost class="product-detail__carousel">
-            <app-product-carousel [images]="carouselImages()" />
-          </div>
-        </div>
 
-        <div class="col-12 col-lg-7">
-          <div class="product-detail__panel">
-            <section class="product-detail__section">
-              <h1 class="product-detail__title mb-0">{{ prod.nombre }}</h1>
+      <div class="col-12 col-lg-7">
+        <div class="product-detail__panel">
+          <section class="product-detail__section">
+            <h1 class="product-detail__title mb-0">{{ prod.nombre }}</h1>
 
-              <div class="product-detail__title-price-divider"></div>
+            <div class="product-detail__title-price-divider"></div>
 
-              <div class="product-detail__price-group">
-                <span class="product-detail__price-current">
-                  {{ getFormattedPrice(prod.precio) }}
-                </span>
+            <div class="product-detail__price-group">
+              <span class="product-detail__price-current">
+                {{ getFormattedPrice(prod.precio) }}
+              </span>
 
-                @if (oldPrice(); as oldPrice) {
-                  <span class="product-detail__price-previous">{{ oldPrice }}</span>
-                }
-              </div>
-            </section>
-
-            @if (hasRenderableAttributes()) {
-              <div class="product-detail__divider"></div>
-
-              <section class="product-detail__section product-detail__section--attributes">
-                <app-product-attribute-selector
-                  [attributes]="renderableAttributes()"
-                  [variantsMap]="prod.variants_map"
-                  [defaultVariant]="prod.variant"
-                  (variantChange)="onVariantChange($event)"
-                />
-              </section>
-            }
-
-            <div class="product-detail__divider"></div>
-
-            <section class="product-detail__section">
-              <div class="product-detail__purchase">
-                <app-quantity-selector
-                  [(quantity)]="quantity"
-                  [max]="selectedVariant()?.cantidad_maxima ?? 1"
-                />
-
-                <div class="product-detail__actions">
-                  <app-button
-                    class="product-detail__cta"
-                    variant="secondary"
-                    type="button"
-                    [disabled]="!selectedVariant() || variantLoading() || addingToCart()"
-                    (click)="addToCart()"
-                  >
-                    @if (variantLoading() || addingToCart()) {
-                      <div class="spinner-border spinner-border-sm" role="status"></div>
-                    } @else {
-                      Agregar al carrito
-                    }
-                  </app-button>
-
-                  <app-button class="product-detail__cta" type="button" [disabled]="!selectedVariant() || variantLoading()">
-                    @if (variantLoading()) {
-                      <div class="spinner-border spinner-border-sm" role="status"></div>
-                    } @else {
-                      Comprar
-                    }
-                  </app-button>
-                </div>
-              </div>
-            </section>
-
-            <div class="product-detail__divider"></div>
-
-            <section class="product-detail__section product-detail__section--description">
-              <h2 class="product-detail__description-heading">DESCRIPCIÓN</h2>
-
-              <div
-                #descriptionBody
-                class="product-detail__description-body"
-                [class.product-detail__description-body--expanded]="descriptionExpanded()"
-                [style.max-height.px]="descriptionExpanded() ? descriptionMaxHeight() || null : null"
-              >
-                {{ prod.descripcion }}
-              </div>
-
-              @if (showDescriptionToggle()) {
-                <button
-                  type="button"
-                  class="product-detail__description-toggle"
-                  (click)="toggleDescription()"
-                >
-                  {{ descriptionExpanded() ? 'Mostrar menos' : 'Mostrar más' }}
-                </button>
+              @if (oldPrice(); as oldPrice) {
+                <span class="product-detail__price-previous">{{ oldPrice }}</span>
               }
+            </div>
+          </section>
+
+          @if (hasRenderableAttributes()) {
+            <div class="product-detail__divider"></div>
+
+            <section class="product-detail__section product-detail__section--attributes">
+              <app-product-attribute-selector
+                [attributes]="renderableAttributes()"
+                [variantsMap]="prod.variants_map"
+                [defaultVariant]="prod.variant"
+                (variantChange)="onVariantChange($event)"
+              />
             </section>
-          </div>
+          }
+
+          <div class="product-detail__divider"></div>
+
+          <section class="product-detail__section">
+            <div class="product-detail__purchase">
+              <app-quantity-selector [(quantity)]="quantity" [max]="selectedVariantMax()" />
+
+              <div class="product-detail__actions">
+                <app-button
+                  class="product-detail__cta"
+                  variant="secondary"
+                  type="button"
+                  [disabled]="!selectedVariantAvailable() || variantLoading() || addingToCart()"
+                  (click)="addToCart()"
+                >
+                  @if (variantLoading() || addingToCart()) {
+                    <div class="spinner-border spinner-border-sm" role="status"></div>
+                  } @else {
+                    Agregar al carrito
+                  }
+                </app-button>
+
+                <app-button
+                  class="product-detail__cta"
+                  type="button"
+                  [disabled]="!selectedVariantAvailable() || variantLoading()"
+                >
+                  @if (variantLoading()) {
+                    <div class="spinner-border spinner-border-sm" role="status"></div>
+                  } @else {
+                    Comprar
+                  }
+                </app-button>
+              </div>
+            </div>
+          </section>
+
+          <div class="product-detail__divider"></div>
+
+          <section class="product-detail__section product-detail__section--description">
+            <h2 class="product-detail__description-heading">DESCRIPCIÓN</h2>
+
+            <div
+              #descriptionBody
+              class="product-detail__description-body"
+              [class.product-detail__description-body--expanded]="descriptionExpanded()"
+              [style.max-height.px]="descriptionExpanded() ? descriptionMaxHeight() || null : null"
+            >
+              {{ prod.descripcion }}
+            </div>
+
+            @if (showDescriptionToggle()) {
+              <button
+                type="button"
+                class="product-detail__description-toggle"
+                (click)="toggleDescription()"
+              >
+                {{ descriptionExpanded() ? 'Mostrar menos' : 'Mostrar más' }}
+              </button>
+            }
+          </section>
         </div>
       </div>
-    } @else {
-      <div class="alert alert-warning text-center mb-0" role="alert">
-        No se encontró el producto especificado.
-      </div>
-    }
-  </div>
+    </div>
+  } @else {
+    <div class="alert alert-warning text-center mb-0" role="alert">
+      No se encontró el producto especificado.
+    </div>
+  }
 </section>

src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts

@@ -1,12 +1,8 @@
 import { TestBed, getTestBed } from '@angular/core/testing';
-import {
-  BrowserTestingModule,
-  platformBrowserTesting
-} from '@angular/platform-browser/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 import { By } from '@angular/platform-browser';
 import { BehaviorSubject, of, throwError } from 'rxjs';
-import { convertToParamMap } from '@angular/router';
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
@@ -14,6 +10,10 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic
 import { CartService } from '../../../../core/services/cart/cart.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { ProductDetailPageComponent } from './product-detail-page.component';
+import {
+  PRODUCT_DETAIL_ERROR_MESSAGE,
+  ProductDetailResolvedData,
+} from './product-detail-page.resolver';
 
 describe('ProductDetailPageComponent', () => {
   const mockProduct: ProductDetail = {
@@ -29,10 +29,10 @@ describe('ProductDetailPageComponent', () => {
     images: ['https://example.com/image.png'],
     attributes: [],
     variants_map: [],
-    variant: null
+    variant: null,
   };
 
-  let paramMapSubject: BehaviorSubject<any>;
+  let routeDataSubject: BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>;
   let catalogServiceStub: any;
   let routerStub: any;
   let cartServiceStub: any;
@@ -40,10 +40,7 @@ describe('ProductDetailPageComponent', () => {
 
   beforeAll(() => {
     try {
-      getTestBed().initTestEnvironment(
-        BrowserTestingModule,
-        platformBrowserTesting()
-      );
+      getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
     } catch {
       // Test environment may already be initialized by another setup entrypoint.
     }
@@ -51,20 +48,25 @@ describe('ProductDetailPageComponent', () => {
 
   beforeEach(() => {
     vi.restoreAllMocks();
-    paramMapSubject = new BehaviorSubject(convertToParamMap({ id: '1' }));
+    routeDataSubject = new BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>({
+      productDetailData: {
+        product: mockProduct,
+        error: null,
+      },
+    });
     catalogServiceStub = {
-      getProducto: vi.fn().mockReturnValue(of(mockProduct))
+      getProducto: vi.fn(),
     };
     routerStub = {
-      navigate: vi.fn()
+      navigate: vi.fn(),
     };
     cartServiceStub = {
-      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' }))
+      addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' })),
     };
     toastServiceStub = {
       success: vi.fn(),
       danger: vi.fn(),
-      info: vi.fn()
+      info: vi.fn(),
     };
   });
 
@@ -75,47 +77,69 @@ describe('ProductDetailPageComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            paramMap: paramMapSubject.asObservable()
-          }
+            data: routeDataSubject.asObservable(),
+          },
         },
         {
           provide: CatalogService,
-          useValue: catalogServiceStub
+          useValue: catalogServiceStub,
         },
         {
           provide: Router,
-          useValue: routerStub
+          useValue: routerStub,
         },
         {
           provide: CartService,
-          useValue: cartServiceStub
+          useValue: cartServiceStub,
         },
         {
           provide: ToastService,
-          useValue: toastServiceStub
-        }
-      ]
+          useValue: toastServiceStub,
+        },
+      ],
     }).compileComponents();
   }
 
-  it('loads the product on init and embeds the carousel', async () => {
+  function resolveProduct(product: ProductDetail): void {
+    routeDataSubject.next({
+      productDetailData: {
+        product,
+        error: null,
+      },
+    });
+  }
+
+  function resolveProductError(error: string): void {
+    routeDataSubject.next({
+      productDetailData: {
+        product: null,
+        error,
+      },
+    });
+  }
+
+  it('renders the resolved product and embeds the carousel', async () => {
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
 
-    expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1);
+    expect(catalogServiceStub.getProducto).not.toHaveBeenCalled();
 
     expect(element.querySelector('app-product-carousel')).not.toBeNull();
-    expect(element.querySelector('.product-detail__title')?.textContent).toContain('Auriculares Bluetooth');
-    expect(element.querySelector('.product-detail__price-current')?.textContent).toContain('$24.999');
+    expect(element.querySelector('.product-detail__title')?.textContent).toContain(
+      'Auriculares Bluetooth',
+    );
+    expect(element.querySelector('.product-detail__price-current')?.textContent).toContain(
+      '$24.999',
+    );
     expect(element.querySelector('.product-detail__price-previous')).toBeNull();
     expect(element.querySelector('.product-carousel__discount-badge')).toBeNull();
   });
 
-  it('shows error message if load fails', async () => {
-    catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('load failed')));
+  it('shows error message if the resolver cannot load the product', async () => {
+    resolveProductError(PRODUCT_DETAIL_ERROR_MESSAGE);
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
     fixture.detectChanges();
@@ -125,35 +149,39 @@ describe('ProductDetailPageComponent', () => {
     expect(element.textContent).toContain('No pudimos cargar los detalles del producto.');
   });
 
-
   it('should use default variant images if present', async () => {
     const detailProduct: ProductDetail = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
       variant: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 10,
+        cantidad_vendida: 0,
         images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
-        definitions: {}
-      }
+        definitions: {},
+      },
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
     fixture.detectChanges();
 
     const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance;
-    expect(carousel.images()).toEqual(['https://example.com/variant1.png', 'https://example.com/variant2.png']);
+    expect(carousel.images()).toEqual([
+      'https://example.com/variant1.png',
+      'https://example.com/variant2.png',
+    ]);
   });
 
   it('should fallback to product images if default variant images are not present', async () => {
     const detailProduct: ProductDetail = {
       ...mockProduct,
       images: ['https://example.com/product.png'],
-      variant: null
+      variant: null,
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -167,9 +195,9 @@ describe('ProductDetailPageComponent', () => {
     const detailProduct: ProductDetail = {
       ...mockProduct,
       images: [],
-      variant: null
+      variant: null,
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -196,16 +224,16 @@ describe('ProductDetailPageComponent', () => {
               value: 'beige',
               label: 'Beige',
               sort_order: 1,
-              metadata: { hex: '#D8D1C7' }
+              metadata: { hex: '#D8D1C7' },
             },
             {
               id: 11,
               value: 'brown',
               label: 'Marrón',
               sort_order: 2,
-              metadata: { palette: { primary: '#7E6460' } }
-            }
-          ]
+              metadata: { palette: { primary: '#7E6460' } },
+            },
+          ],
         },
         {
           id: 2,
@@ -220,29 +248,31 @@ describe('ProductDetailPageComponent', () => {
               value: 'mesh',
               label: 'Mesh',
               sort_order: 1,
-              metadata: null
+              metadata: null,
             },
             {
               id: 21,
               value: 'cuero',
               label: 'Cuero',
               sort_order: 2,
-              metadata: null
-            }
-          ]
-        }
+              metadata: null,
+            },
+          ],
+        },
       ],
       variant: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 10,
+        cantidad_vendida: 0,
         images: ['https://example.com/variant1.png'],
         definitions: {
           color: 'beige',
-          material: 'Cuero'
-        }
-      }
+          material: 'Cuero',
+        },
+      },
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -252,14 +282,16 @@ describe('ProductDetailPageComponent', () => {
     const swatches = element.querySelectorAll('.attribute-selector__swatch');
     const textOptions = element.querySelectorAll('.attribute-selector__text-option');
     const labels = Array.from(element.querySelectorAll('.attribute-selector__label')).map((label) =>
-      label.textContent?.trim()
+      label.textContent?.trim(),
     );
 
     expect(labels).toEqual(['Color:', 'Material:']);
     expect(swatches).toHaveLength(2);
     expect(textOptions).toHaveLength(2);
     expect(swatches[0].classList.contains('attribute-selector__swatch--selected')).toBe(true);
-    expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(true);
+    expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(
+      true,
+    );
     expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
   });
 
@@ -281,17 +313,19 @@ describe('ProductDetailPageComponent', () => {
 
     fixture.componentInstance['selectedVariant'].set({
       variant_id: 1,
+      inventory_policy: 'tracked',
       cantidad_maxima: 10,
-      attributes: {}
+      cantidad_vendida: 0,
+      attributes: {},
     });
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
     const decreaseButton = element.querySelector(
-      '[aria-label="Disminuir cantidad"]'
+      '[aria-label="Disminuir cantidad"]',
     ) as HTMLButtonElement;
     const increaseButton = element.querySelector(
-      '[aria-label="Aumentar cantidad"]'
+      '[aria-label="Aumentar cantidad"]',
     ) as HTMLButtonElement;
 
     decreaseButton.click();
@@ -316,7 +350,7 @@ describe('ProductDetailPageComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
     const toggleButton = element.querySelector(
-      '.product-detail__description-toggle'
+      '.product-detail__description-toggle',
     ) as HTMLButtonElement;
 
     expect(toggleButton.textContent?.trim()).toBe('Mostrar más');
@@ -327,7 +361,7 @@ describe('ProductDetailPageComponent', () => {
     expect(
       element
         .querySelector('.product-detail__description-body')
-        ?.classList.contains('product-detail__description-body--expanded')
+        ?.classList.contains('product-detail__description-body--expanded'),
     ).toBe(true);
     expect(toggleButton.textContent?.trim()).toBe('Mostrar menos');
   });
@@ -338,12 +372,12 @@ describe('ProductDetailPageComponent', () => {
     fixture.detectChanges();
 
     const buttons = Array.from(
-      fixture.nativeElement.querySelectorAll('app-button button')
+      fixture.nativeElement.querySelectorAll('app-button button'),
     ) as HTMLButtonElement[];
 
     expect(buttons.map((button) => button.textContent?.trim())).toEqual([
       'Agregar al carrito',
-      'Comprar'
+      'Comprar',
     ]);
 
     buttons[0].click();
@@ -357,19 +391,23 @@ describe('ProductDetailPageComponent', () => {
       ...mockProduct,
       variant: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 5,
+        cantidad_vendida: 0,
         images: [],
-        definitions: {}
+        definitions: {},
       },
       variants_map: [
         {
           variant_id: 123,
+          inventory_policy: 'tracked',
           cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          cantidad_vendida: 0,
+          attributes: {},
+        },
+      ],
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
 
     await configureTestingModule();
     const fixture = TestBed.createComponent(ProductDetailPageComponent);
@@ -382,14 +420,14 @@ describe('ProductDetailPageComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
     const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito',
     ) as HTMLButtonElement;
 
     expect(addToCartButton).toBeDefined();
     addToCartButton.click();
     fixture.detectChanges();
 
-    expect(cartServiceStub.addItem).toHaveBeenCalledWith(123, 3);
+    expect(cartServiceStub.addItem).toHaveBeenCalledWith('variant', 123, 3);
     expect(toastServiceStub.success).toHaveBeenCalledWith('Producto agregado al carrito');
   });
 
@@ -398,19 +436,23 @@ describe('ProductDetailPageComponent', () => {
       ...mockProduct,
       variant: {
         id: 123,
+        inventory_policy: 'tracked',
         cantidad_maxima: 5,
+        cantidad_vendida: 0,
         images: [],
-        definitions: {}
+        definitions: {},
       },
       variants_map: [
         {
           variant_id: 123,
+          inventory_policy: 'tracked',
           cantidad_maxima: 5,
-          attributes: {}
-        }
-      ]
+          cantidad_vendida: 0,
+          attributes: {},
+        },
+      ],
     };
-    catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
+    resolveProduct(detailProduct);
     cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add')));
 
     await configureTestingModule();
@@ -422,13 +464,82 @@ describe('ProductDetailPageComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
     const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find(
-      (btn) => btn.textContent?.trim() === 'Agregar al carrito'
+      (btn) => btn.textContent?.trim() === 'Agregar al carrito',
     ) as HTMLButtonElement;
 
     addToCartButton.click();
     fixture.detectChanges();
 
     expect(cartServiceStub.addItem).toHaveBeenCalled();
-    expect(toastServiceStub.danger).toHaveBeenCalledWith('No se pudo agregar el producto al carrito.');
+    expect(toastServiceStub.danger).toHaveBeenCalledWith(
+      'No se pudo agregar el producto al carrito.',
+    );
+  });
+
+  it('allows unlimited variants to increase quantity without a maximum', async () => {
+    const unlimitedVariant = {
+      variant_id: 321,
+      inventory_policy: 'unlimited' as const,
+      cantidad_maxima: null,
+      cantidad_vendida: 10,
+      attributes: {},
+    };
+    resolveProduct({
+      ...mockProduct,
+      variant: {
+        id: 321,
+        inventory_policy: 'unlimited',
+        cantidad_maxima: null,
+        cantidad_vendida: 10,
+        images: [],
+        definitions: {},
+      },
+      variants_map: [unlimitedVariant],
+    });
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const increaseButton = fixture.nativeElement.querySelector(
+      'app-quantity-selector button:last-child',
+    ) as HTMLButtonElement;
+    expect(increaseButton.disabled).toBe(false);
+    increaseButton.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance['quantity']()).toBe(2);
+  });
+
+  it('disables purchase actions for tracked variants without stock', async () => {
+    const trackedVariant = {
+      variant_id: 654,
+      inventory_policy: 'tracked' as const,
+      cantidad_maxima: 0,
+      cantidad_vendida: 5,
+      attributes: {},
+    };
+    resolveProduct({
+      ...mockProduct,
+      variant: {
+        id: 654,
+        inventory_policy: 'tracked',
+        cantidad_maxima: 0,
+        cantidad_vendida: 5,
+        images: [],
+        definitions: {},
+      },
+      variants_map: [trackedVariant],
+    });
+
+    await configureTestingModule();
+    const fixture = TestBed.createComponent(ProductDetailPageComponent);
+    fixture.detectChanges();
+
+    const purchaseButtons = Array.from(
+      fixture.nativeElement.querySelectorAll('app-button button'),
+    ) as HTMLButtonElement[];
+    expect(purchaseButtons).toHaveLength(2);
+    expect(purchaseButtons.every((button) => button.disabled)).toBe(true);
   });
 });

src/app/features/store/pages/product-detail-page/product-detail-page.component.ts

@@ -9,7 +9,7 @@ import {
   inject,
   signal,
   viewChild,
-  PLATFORM_ID
+  PLATFORM_ID,
 } from '@angular/core';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -20,16 +20,14 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic
 import { ToastService } from '../../../../core/services/toast.service';
 import { CartService } from '../../../../core/services/cart/cart.service';
 import {
-  ProductAttribute,
-  ProductAttributeOption,
   ProductDetail,
-  ProductVariant,
-  ProductVariantMap
+  ProductVariantMap,
 } from '../../../../core/services/catalog/catalog.interface';
 import { ProductCarouselComponent } from '../../components/product-carousel/product-carousel.component';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { ProductAttributeSelectorComponent } from '../../components/product-attribute-selector/product-attribute-selector.component';
 import { QuantitySelectorComponent } from '../../../../shared/components/quantity-selector/quantity-selector.component';
+import { ProductDetailResolvedData } from './product-detail-page.resolver';
 
 @Component({
   selector: 'app-product-detail-page',
@@ -40,11 +38,11 @@ import { QuantitySelectorComponent } from '../../../../shared/components/quantit
     ProductCarouselComponent,
     ButtonComponent,
     ProductAttributeSelectorComponent,
-    QuantitySelectorComponent
+    QuantitySelectorComponent,
   ],
   templateUrl: './product-detail-page.component.html',
   styleUrl: './product-detail-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductDetailPageComponent implements OnInit, OnDestroy {
   private readonly route = inject(ActivatedRoute);
@@ -82,18 +80,26 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   protected readonly error = signal<string | null>(null);
   protected readonly selectedVariant = signal<ProductVariantMap | null>(null);
   protected readonly quantity = signal(1);
+  protected readonly selectedVariantMax = computed<number | null>(() => {
+    const variant = this.selectedVariant();
+    return variant ? variant.cantidad_maxima : 1;
+  });
+  protected readonly selectedVariantAvailable = computed(() => {
+    const variant = this.selectedVariant();
+    return variant !== null && this.isVariantAvailable(variant);
+  });
   protected readonly descriptionExpanded = signal(false);
   protected readonly descriptionMaxHeight = signal(0);
   protected readonly descriptionHasOverflow = signal(false);
   protected readonly renderableAttributes = computed(() =>
-    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0)
+    (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0),
   );
   protected readonly hasRenderableAttributes = computed(
-    () => this.renderableAttributes().length > 0
+    () => this.renderableAttributes().length > 0,
   );
   protected readonly oldPrice = computed<string | null>(() => null);
   protected readonly showDescriptionToggle = computed(
-    () => this.descriptionExpanded() || this.descriptionHasOverflow()
+    () => this.descriptionExpanded() || this.descriptionHasOverflow(),
   );
 
   constructor() {
@@ -113,14 +119,12 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.routeSub = this.route.paramMap.subscribe((params) => {
-      const id = this.parseIntegerParam(params.get('id'));
-      if (id === null) {
-        this.error.set('ID de producto inválido');
-        return;
-      }
+    this.routeSub = this.route.data.subscribe((data) => {
+      const resolvedData = data['productDetailData'] as ProductDetailResolvedData | undefined;
 
-      this.loadProduct(id);
+      if (resolvedData) {
+        this.applyResolvedData(resolvedData);
+      }
     });
   }
 
@@ -131,38 +135,13 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     this.clearMeasurementTimer();
   }
 
-  private loadProduct(id: number): void {
-    this.loading.set(true);
-    this.error.set(null);
-    this.product.set(null);
-
-    this.productSub?.unsubscribe();
-    this.productSub = this.catalogService.getProducto(id).subscribe({
-      next: (prod) => {
-        this.product.set(prod);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
-        this.quantity.set(1);
-        this.descriptionExpanded.set(false);
-        this.descriptionHasOverflow.set(false);
-        this.loading.set(false);
-      },
-      error: () => {
-        this.error.set('No pudimos cargar los detalles del producto.');
-        this.loading.set(false);
-      }
-    });
-  }
-
   private loadProductVariant(productId: number, variantId: number): void {
     this.variantLoading.set(true);
 
     this.productSub?.unsubscribe();
     this.productSub = this.catalogService.getProducto(productId, variantId).subscribe({
       next: (prod) => {
-        this.product.set(prod);
-        const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
-        this.selectedVariant.set(matchingVariant);
+        this.applyProduct(prod, false);
         this.variantLoading.set(false);
       },
       error: (err: HttpErrorResponse) => {
@@ -172,23 +151,46 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
 
         this.product.update((currentProduct) => {
           if (!currentProduct) return null;
-          const updatedVariantsMap = currentProduct.variants_map.map((v) => {
-            if (v.variant_id === variantId) {
-              return { ...v, cantidad_maxima: 0 };
-            }
-            return v;
-          });
           return {
             ...currentProduct,
-            variants_map: updatedVariantsMap
+            variants_map: currentProduct.variants_map.filter((v) => v.variant_id !== variantId),
           };
         });
 
         this.attributeSelector()?.reset();
-      }
+      },
     });
   }
 
+  private applyResolvedData(resolvedData: ProductDetailResolvedData): void {
+    this.productSub?.unsubscribe();
+    this.loading.set(false);
+    this.variantLoading.set(false);
+
+    if (resolvedData.error) {
+      this.product.set(null);
+      this.error.set(resolvedData.error);
+      return;
+    }
+
+    if (resolvedData.product) {
+      this.applyProduct(resolvedData.product, true);
+    }
+  }
+
+  private applyProduct(prod: ProductDetail, resetQuantity: boolean): void {
+    this.product.set(prod);
+    const matchingVariant =
+      prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null;
+    this.selectedVariant.set(matchingVariant);
+    if (resetQuantity) {
+      this.quantity.set(1);
+    }
+    this.descriptionExpanded.set(false);
+    this.descriptionHasOverflow.set(false);
+    this.error.set(null);
+  }
+
   protected goBack(): void {
     this.router.navigate(['/']);
   }
@@ -209,7 +211,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
 
     this.selectedVariant.set(variant);
-    if (variant && this.quantity() > variant.cantidad_maxima) {
+    if (variant && variant.cantidad_maxima !== null && this.quantity() > variant.cantidad_maxima) {
       this.quantity.set(Math.max(1, variant.cantidad_maxima));
     }
 
@@ -219,17 +221,15 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
   }
 
-
-
   protected addToCart(): void {
     const variant = this.selectedVariant();
-    if (!variant) {
+    if (!variant || !this.isVariantAvailable(variant)) {
       this.toastService.danger('Por favor, selecciona una variante.');
       return;
     }
 
     this.addingToCart.set(true);
-    this.cartService.addItem(variant.variant_id, this.quantity()).subscribe({
+    this.cartService.addItem('variant', variant.variant_id, this.quantity()).subscribe({
       next: (res) => {
         const msg = res.message || 'Producto agregado al carrito';
         this.toastService.success(msg);
@@ -239,23 +239,18 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
         const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.';
         this.toastService.danger(errorMessage);
         this.addingToCart.set(false);
-      }
+      },
     });
   }
 
+  private isVariantAvailable(variant: ProductVariantMap): boolean {
+    return variant.inventory_policy === 'unlimited' || (variant.cantidad_maxima ?? 0) > 0;
+  }
+
   protected toggleDescription(): void {
     this.descriptionExpanded.update((current) => !current);
   }
 
-  private parseIntegerParam(value: string | null): number | null {
-    if (!value) {
-      return null;
-    }
-
-    const parsed = Number(value);
-    return Number.isInteger(parsed) ? parsed : null;
-  }
-
   private bindCarouselResizeObserver(): void {
     const previewElement = this.getCarouselPreviewElement();
 
@@ -315,7 +310,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
     }
 
     this.descriptionHasOverflow.set(
-      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1
+      descriptionElement.scrollHeight - descriptionElement.clientHeight > 1,
     );
   }
 

src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts

@@ -0,0 +1,91 @@
+import { TestBed } from '@angular/core/testing';
+import { convertToParamMap } from '@angular/router';
+import { firstValueFrom, Observable, of, throwError } from 'rxjs';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import {
+  PRODUCT_DETAIL_ERROR_MESSAGE,
+  PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+  ProductDetailResolvedData,
+  productDetailResolver,
+} from './product-detail-page.resolver';
+
+describe('productDetailResolver', () => {
+  const product: ProductDetail = {
+    id: 1,
+    category_id: 10,
+    brand_id: null,
+    slug: 'auriculares-bluetooth',
+    nombre: 'Auriculares Bluetooth',
+    descripcion: 'Auriculares bluetooth de prueba',
+    precio: '24999',
+    category: 'Tecnologia',
+    brand: null,
+    images: [],
+    attributes: [],
+    variants_map: [],
+    variant: null,
+  };
+
+  let catalogServiceStub: { getProducto: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    catalogServiceStub = {
+      getProducto: vi.fn().mockReturnValue(of(product)),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: CatalogService,
+          useValue: catalogServiceStub,
+        },
+      ],
+    });
+  });
+
+  it('resolves the product detail for the route id', async () => {
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('1'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product,
+      error: null,
+    });
+    expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1);
+  });
+
+  it('returns an error state for invalid ids', async () => {
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('abc'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product: null,
+      error: PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+    });
+    expect(catalogServiceStub.getProducto).not.toHaveBeenCalled();
+  });
+
+  it('returns an error state when the request fails', async () => {
+    catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('boom')));
+
+    const result = TestBed.runInInjectionContext(() =>
+      productDetailResolver(createRouteSnapshot('1'), {} as never),
+    );
+
+    await expect(firstValueFrom(result as Observable<ProductDetailResolvedData>)).resolves.toEqual({
+      product: null,
+      error: PRODUCT_DETAIL_ERROR_MESSAGE,
+    });
+  });
+});
+
+function createRouteSnapshot(id: string) {
+  return {
+    paramMap: convertToParamMap({ id }),
+  } as never;
+}

src/app/features/store/pages/product-detail-page/product-detail-page.resolver.ts

@@ -0,0 +1,53 @@
+import { inject } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
+import { catchError, map, of } from 'rxjs';
+
+import { ProductDetail } from '../../../../core/services/catalog/catalog.interface';
+import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+
+export const PRODUCT_DETAIL_ERROR_MESSAGE = 'No pudimos cargar los detalles del producto.';
+export const PRODUCT_DETAIL_INVALID_ID_MESSAGE = 'ID de producto invalido';
+
+export interface ProductDetailResolvedData {
+  product: ProductDetail | null;
+  error: string | null;
+}
+
+export const productDetailResolver: ResolveFn<ProductDetailResolvedData> = (
+  route: ActivatedRouteSnapshot,
+) => {
+  const productId = parseIntegerParam(route.paramMap.get('id'));
+
+  if (productId === null) {
+    return of({
+      product: null,
+      error: PRODUCT_DETAIL_INVALID_ID_MESSAGE,
+    });
+  }
+
+  return inject(CatalogService)
+    .getProducto(productId)
+    .pipe(
+      map(
+        (product): ProductDetailResolvedData => ({
+          product,
+          error: null,
+        }),
+      ),
+      catchError(() =>
+        of({
+          product: null,
+          error: PRODUCT_DETAIL_ERROR_MESSAGE,
+        }),
+      ),
+    );
+};
+
+function parseIntegerParam(value: string | null): number | null {
+  if (!value) {
+    return null;
+  }
+
+  const parsed = Number(value);
+  return Number.isInteger(parsed) ? parsed : null;
+}

src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html

@@ -0,0 +1,135 @@
+<div class="status-content">
+  @if (isLoading()) {
+    <div class="status-content__icon status-content__icon--loading">
+      <i class="fa-solid fa-spinner fa-spin"></i>
+    </div>
+    <h2 class="status-content__title">Cargando estado...</h2>
+  } @else if (status() === 'approved') {
+    <div class="status-content__section status-content__section--primary">
+      <div class="status-content__icon status-content__icon--success">
+        <i class="fa-solid fa-check"></i>
+      </div>
+      <h2 class="status-content__title">COMPRA REALIZADA!</h2>
+      <p class="status-content__subtitle">Tu compra fue realizada con &eacute;xito</p>
+    </div>
+
+    <hr class="status-content__divider" />
+
+    <div class="status-content__section status-content__section--secondary">
+      <p class="status-content__message">Comunicate con nosotros para coordinar el env&iacute;o.</p>
+
+      <app-button
+        type="button"
+        variant="secondary"
+        hostClass="status-content__button d-block"
+        buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
+        (click)="openWhatsApp()"
+      >
+        <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
+        <span>WhatsApp</span>
+      </app-button>
+    </div>
+  } @else if (status() === 'pending') {
+    <div class="status-content__section status-content__section--primary">
+      <div class="status-content__icon status-content__icon--warning">
+        <i class="fa-solid fa-clock"></i>
+      </div>
+      <h2 class="status-content__title">ESTAMOS VERIFICANDO TU PAGO</h2>
+      <p class="status-content__subtitle">Tu compra ya fue registrada y estamos esperando la confirmaci&oacute;n del pago.</p>
+    </div>
+
+    <hr class="status-content__divider" />
+
+    <div class="status-content__section status-content__section--secondary">
+      <p class="status-content__message">Esta pantalla se actualiza autom&aacute;ticamente cuando el pago impacta.</p>
+      @if (isRefreshing()) {
+        <p class="status-content__hint">Actualizando estado...</p>
+      }
+
+      <app-button
+        type="button"
+        variant="secondary"
+        hostClass="status-content__button d-block"
+        buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
+        [disabled]="isRefreshing()"
+        (click)="retryStatusCheck()"
+      >
+        Actualizar estado
+      </app-button>
+    </div>
+  } @else if (status() === 'rejected') {
+    <div class="status-content__section status-content__section--primary">
+      <div class="status-content__icon status-content__icon--error">
+        <i class="fa-solid fa-triangle-exclamation"></i>
+      </div>
+      <h2 class="status-content__title">NO PUDIMOS CONFIRMAR EL PAGO</h2>
+      <p class="status-content__subtitle">Revis&aacute; el medio de pago o comunicate con nosotros para continuar.</p>
+    </div>
+
+    <hr class="status-content__divider" />
+
+    <div class="status-content__section status-content__section--secondary">
+      <p class="status-content__message">Si ya pagaste, pod&eacute;s reintentar la consulta o escribirnos para revisarlo.</p>
+
+      <div class="status-content__actions">
+        <app-button
+          type="button"
+          variant="secondary"
+          hostClass="status-content__button d-block"
+          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
+          (click)="retryStatusCheck()"
+        >
+          Reintentar
+        </app-button>
+
+        <app-button
+          type="button"
+          variant="secondary"
+          hostClass="status-content__button d-block"
+          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
+          (click)="openWhatsApp()"
+        >
+          <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
+          <span>WhatsApp</span>
+        </app-button>
+      </div>
+    </div>
+  } @else {
+    <div class="status-content__section status-content__section--primary">
+      <div class="status-content__icon status-content__icon--error">
+        <i class="fa-solid fa-triangle-exclamation"></i>
+      </div>
+      <h2 class="status-content__title">NO PUDIMOS OBTENER EL ESTADO</h2>
+      <p class="status-content__subtitle">Hubo un problema al consultar tu compra.</p>
+    </div>
+
+    <hr class="status-content__divider" />
+
+    <div class="status-content__section status-content__section--secondary">
+      <p class="status-content__message">Reintent&aacute; en unos segundos. Si el problema sigue, comunicate con nosotros.</p>
+
+      <div class="status-content__actions">
+        <app-button
+          type="button"
+          variant="secondary"
+          hostClass="status-content__button d-block"
+          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center py-2"
+          (click)="retryStatusCheck()"
+        >
+          Reintentar
+        </app-button>
+
+        <app-button
+          type="button"
+          variant="secondary"
+          hostClass="status-content__button d-block"
+          buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
+          (click)="openWhatsApp()"
+        >
+          <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
+          <span>WhatsApp</span>
+        </app-button>
+      </div>
+    </div>
+  }
+</div>