tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tbianchini:36045656e714f581cf8b03dfa25fdba6d05d8fb1
Branches Tags
tbianchini:develop tbianchini:homologacion tbianchini:feature/responsive tbianchini:feature/website_types tbianchini:refactor/purchase_screen tbianchini:auth/google_oauth tbianchini:feature/events tbianchini:feature/compras tbianchini:feature/cart tbianchini:prueba/cache_on_ssr tbianchini:main
..
compare: tbianchini:prueba/cache_on_ssr
Branches Tags
tbianchini:homologacion tbianchini:develop tbianchini:feature/responsive tbianchini:feature/website_types tbianchini:refactor/purchase_screen tbianchini:auth/google_oauth tbianchini:feature/events tbianchini:feature/compras tbianchini:feature/cart tbianchini:prueba/cache_on_ssr tbianchini:main

3 Commits
36045656e7 ... prueba/cac

Author SHA1 Message Date
ncoronel
fa47188898 feat: add ReutilizablesTestPageComponent to showcase and validate shared button and input component variants 2026-06-26 16:58:14 -03:00
ncoronel
e074aeb199 feat: implement tenant branding injection and SSR bootstrap logic with comprehensive testing 2026-06-26 16:25:31 -03:00
ncoronel
86680fc976 feat: refactor routing and enhance tenant service integration 
- Updated app routing to redirect to the store feature and load children routes correctly.
- Enhanced app styles with tenant-specific branding and loading states.
- Improved app component to dynamically set CSS variables based on tenant colors.
- Refactored store layout components to simplify logo handling and improve accessibility.
- Updated tenant service to manage state more effectively and handle SSR scenarios.
- Added tests for tenant service and layout components to ensure proper functionality.
- Introduced a new SSR cache store for tenant state management.
- Enhanced button styles to utilize tenant colors for better branding consistency.
 2026-06-26 15:55:45 -03:00
201 changed files with 362 additions and 13881 deletions
Expand all files Collapse all files

18
angular.json
View File

@@ -2,8 +2,7 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "npm",
"analytics": false
"packageManager": "npm"
},
"newProjectRoot": "projects",
"projects": {
@@ -36,10 +35,7 @@
"server": "src/main.server.ts",
"outputMode": "server",
"security": {
"allowedHosts": [
"localhost",
"127.0.0.1"
]
"allowedHosts": ["localhost", "127.0.0.1"]
},
"ssr": {
"entry": "src/server.ts"
@@ -62,11 +58,6 @@
"outputHashing": "all"
},
"development": {
"optimization": true,
"extractLicenses": false,
"sourceMap": true
},
"local": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
@@ -82,9 +73,6 @@
},
"development": {
"buildTarget": "shopit-front:build:development"
},
"local": {
"buildTarget": "shopit-front:build:local"
}
},
"defaultConfiguration": "development"
@@ -95,4 +83,4 @@
}
}
}
}
}

298
package-lock.json generated
View File

@@ -19,7 +19,6 @@
"@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"
},
@@ -4395,15 +4394,6 @@
"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",
@@ -4588,24 +4578,6 @@
"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",
@@ -4787,15 +4759,6 @@
}
}
},
"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",
@@ -4823,12 +4786,6 @@
"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",
@@ -5280,19 +5237,6 @@
"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",
@@ -5362,6 +5306,7 @@
"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.*"
@@ -5982,18 +5927,6 @@
"@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",
@@ -6770,33 +6703,6 @@
"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",
@@ -6810,15 +6716,6 @@
"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",
@@ -6927,15 +6824,6 @@
"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",
@@ -7033,15 +6921,6 @@
"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",
@@ -7154,154 +7033,6 @@
"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",
@@ -7362,15 +7093,6 @@
"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",
@@ -7381,12 +7103,6 @@
"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",
@@ -7609,12 +7325,6 @@
"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",
@@ -8980,12 +8690,6 @@
"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",

1
package.json
View File

@@ -23,7 +23,6 @@
"@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"
},

BIN
public/images/pantalon-scuba.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 647 KiB

BIN
public/images/zapatillas-running.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 541 KiB

33
src/app/app.config.ts
View File

@@ -1,36 +1,17 @@
import { HttpRequest, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import {
ApplicationConfig,
provideAppInitializer,
provideBrowserGlobalErrorListeners,
} from '@angular/core';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
import { provideClientHydration } 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(
withHttpTransferCacheOptions({
includeRequestsWithAuthHeaders: true,
filter: isStoreCatalogRequest,
}),
),
provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
provideAppInitializer(authBootstrap),
provideAppInitializer(tenantBootstrap),
],
provideClientHydration(),
provideHttpClient(withFetch()),
provideAppInitializer(tenantBootstrap)
]
};

2
src/app/app.html
View File

@@ -1,7 +1,5 @@
@if (status() === 'ready') {
<router-outlet />
<app-toast-container />
<app-modal-host />
} @else if (status() === 'not-found') {
<section class="tenant-status">
<div class="tenant-status__card">

111
src/app/app.routes.spec.ts
View File

@@ -1,15 +1,11 @@
import { computed, signal } from '@angular/core';
import { 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 { AuthService } from './core/services/auth/auth.service';
import { CartService } from './core/services/cart/cart.service';
import { routes } from './app.routes';
import { Tenant } from './core/services/tenant.interface';
import { TenantService } from './core/services/tenant.service';
import { routes } from './app.routes';
const tenant: Tenant = {
id: 1,
@@ -19,9 +15,7 @@ const tenant: Tenant = {
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};
@@ -37,44 +31,13 @@ function createTenantServiceStub(
tenant: tenantState.asReadonly(),
status: statusState.asReadonly(),
getTenant: () => tenantState(),
getTenantApiUrl: () => {
const tenantVal = tenantState();
if (!tenantVal) {
throw new Error('No se pudo resolver el tenant activo.');
}
return `http://localhost:8000/api/tenants/${tenantVal.codigo}`;
},
bootstrap: vi.fn().mockResolvedValue(undefined)
};
}
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(),
authService: ReturnType<typeof createAuthServiceStub> = createAuthServiceStub()
tenantService: ReturnType<typeof createTenantServiceStub> = createTenantServiceStub()
) {
TestBed.resetTestingModule();
@@ -85,17 +48,6 @@ async function renderAppAt(
{
provide: TenantService,
useValue: tenantService
},
{
provide: CartService,
useValue: {
cart: signal(null).asReadonly(),
loadCart: () => of({ id: 1, items: [], subtotal: '0' })
}
},
{
provide: AuthService,
useValue: authService
}
]
}).compileComponents();
@@ -118,8 +70,8 @@ describe('app routes', () => {
expect(router.url).toBe('/');
expect(compiled.querySelector('.store-layout')).not.toBeNull();
expect(compiled.querySelector('app-store-home-page')).not.toBeNull();
expect(compiled.textContent).toContain('Productos');
expect(compiled.querySelector('.store-home')).not.toBeNull();
expect(compiled.textContent).toContain('Tienda en construccion');
expect(compiled.style.getPropertyValue('--tenant-primary')).toBe(tenant.primary_color);
});
@@ -135,63 +87,14 @@ 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),
createAuthServiceStub()
createTenantServiceStub('not-found', null)
);
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');
});
});

27
src/app/app.spec.ts
View File

@@ -1,12 +1,6 @@
import '@angular/compiler';
import { signal } from '@angular/core';
import { TestBed, getTestBed } from '@angular/core/testing';
import {
BrowserTestingModule,
platformBrowserTesting
} from '@angular/platform-browser/testing';
import { TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
import { App } from './app';
import { Tenant } from './core/services/tenant.interface';
@@ -20,9 +14,7 @@ const tenant: Tenant = {
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};
@@ -40,21 +32,6 @@ function createTenantServiceStub(status: 'ready' | 'not-found', currentTenant: T
}
describe('App', () => {
beforeAll(() => {
try {
getTestBed().initTestEnvironment(
BrowserTestingModule,
platformBrowserTesting()
);
} catch {
// Test environment may already be initialized by another setup entrypoint.
}
});
afterEach(() => {
TestBed.resetTestingModule();
});
it('creates the app when the tenant is ready', async () => {
await TestBed.configureTestingModule({
imports: [App],

39
src/app/app.ts
View File

@@ -3,8 +3,6 @@ import { RouterOutlet } from '@angular/router';
import { TenantService } from './core/services/tenant.service';
import { DEFAULT_TENANT_BRANDING } from './core/services/tenant-ssr-cache.store';
import { ModalHostComponent } from './shared/components/modal-host/modal-host.component';
import { ToastContainerComponent } from './shared/components/toast-container/toast-container.component';
function hexToRgb(hex: string): string {
const cleanHex = hex.replace('#', '').trim();
@@ -23,30 +21,17 @@ function hexToRgb(hex: string): string {
@Component({
selector: 'app-root',
imports: [RouterOutlet, ToastContainerComponent, ModalHostComponent],
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.scss',
host: {
'[style.--tenant-primary]': 'tenantPrimaryColor()',
'[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.--color-header-bg]': 'tenantHeaderBgColor()',
'[style.--color-footer-bg]': 'tenantFooterBgColor()'
'[style.--tenant-header-footer-bg]': 'tenantHeaderFooterBgColor()'
}
})
export class App {
@@ -63,9 +48,6 @@ export class App {
protected readonly tenantDangerColor = computed(
() => this.tenantService.tenant()?.danger_color ?? DEFAULT_TENANT_BRANDING.dangerColor
);
protected readonly tenantSuccessColor = computed(
() => this.tenantService.tenant()?.success_color ?? DEFAULT_TENANT_BRANDING.successColor
);
protected readonly tenantPrimaryColorRgb = computed(() =>
hexToRgb(this.tenantPrimaryColor())
);
@@ -75,17 +57,10 @@ export class App {
protected readonly tenantDangerColorRgb = computed(() =>
hexToRgb(this.tenantDangerColor())
);
protected readonly tenantSuccessColorRgb = computed(() =>
hexToRgb(this.tenantSuccessColor())
);
protected readonly tenantHeaderBgColor = computed(
protected readonly tenantHeaderFooterBgColor = computed(
() =>
this.tenantService.tenant()?.header_bg_color ??
DEFAULT_TENANT_BRANDING.headerBgColor
this.tenantService.tenant()?.header_footer_bg_color ??
DEFAULT_TENANT_BRANDING.headerFooterBgColor
);
protected readonly tenantFooterBgColor = computed(
() =>
this.tenantService.tenant()?.footer_bg_color ??
DEFAULT_TENANT_BRANDING.footerBgColor
);
}
}

24
src/app/core/guards/menu.guard.ts
View File

@@ -1,24 +0,0 @@
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(['/']);
};
};

13
src/app/core/layout/simple-layout/simple-layout.component.html
View File

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

50
src/app/core/layout/simple-layout/simple-layout.component.scss
View File

@@ -1,50 +0,0 @@
: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;
}
}

11
src/app/core/layout/simple-layout/simple-layout.component.ts
View File

@@ -1,11 +0,0 @@
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 {}

2
src/app/core/layout/store-layout/store-footer/store-footer.component.scss
View File

@@ -1,5 +1,5 @@
.store-layout__footer {
background-color: var(--tenant-footer-bg);
background-color: var(--tenant-header-footer-bg);
}
.store-layout__brand-slot {

50
src/app/core/layout/store-layout/store-header/store-header.component.html
View File

@@ -1,28 +1,28 @@
<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">
<a
routerLink="/"
class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0 text-decoration-none"
<div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex 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"
data-testid="store-header-brand-slot"
aria-label="Logo del comercio"
>
@if (logoUrl()) {
<img class="store-layout__brand-logo" [src]="logoUrl()" alt="Logo del comercio" />
@if (logoUrl) {
<img class="store-layout__brand-logo" [src]="logoUrl" alt="Logo del comercio" />
} @else {
<div class="store-layout__brand-logo-shell" aria-hidden="true">
<span class="store-layout__brand-logo-skeleton"></span>
</div>
}
</a>
</div>
<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="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
<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"
@@ -34,30 +34,16 @@
</div>
<div class="d-flex align-items-center justify-content-end gap-1" aria-label="Acciones de usuario">
<app-cart-icon
[quantity]="cartQuantity()"
ariaLabel="Carrito de compras"
title="Carrito"
(click)="cartClick.emit()"
/>
<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>
@for (action of headerActions; track action.label) {
<button
type="button"
class="btn btn-link store-layout__action-button p-2 text-decoration-none"
[attr.aria-label]="action.label"
[attr.title]="action.label"
>
<i [class]="action.iconClass" aria-hidden="true"></i>
</button>
}
</div>
</div>
</div>

47
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@@ -1,6 +1,6 @@
.store-layout__header {
color: #ffffff;
background-color: var(--tenant-header-bg);
background-color: var(--tenant-header-footer-bg);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
@@ -41,62 +41,51 @@
}
.store-layout__search {
width: min(100%, 260px);
min-width: 0;
width: min(100%, 24rem);
min-width: 18rem;
}
.store-layout__search-input {
color: #666666;
border-color: #cccccc;
border-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.96);
}
.store-layout__search-input::placeholder {
color: #666666;
}
.store-layout__search-input:focus {
border-color: #cccccc;
box-shadow: none;
outline: none;
border-color: var(--tenant-primary);
box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
}
.store-layout__search-button {
color: #a0a0a0;
border-color: #cccccc;
background-color: rgba(255, 255, 255, 0.96);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
background-color: color-mix(in srgb, white 10%, var(--tenant-header-footer-bg));
}
.store-layout__search-button:hover,
.store-layout__search-button:focus-visible {
color: #8a8a8a;
border-color: #cccccc;
background-color: #ffffff;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.28);
background-color: color-mix(in srgb, white 16%, var(--tenant-header-footer-bg));
}
.store-layout__action-button {
color: #a0a0a0;
color: #ffffff;
}
.store-layout__action-button:hover,
.store-layout__action-button:focus-visible {
color: #8a8a8a;
}
.store-layout__user-menu {
position: relative;
display: inline-flex;
color: color-mix(in srgb, white 84%, var(--tenant-primary));
}
.store-layout__category-trigger {
font-size: 0.8rem;
letter-spacing: 0.02em;
color: #a0a0a0;
color: #ffffff;
}
.store-layout__category-trigger:hover,
.store-layout__category-trigger:focus-visible {
color: #8a8a8a;
color: color-mix(in srgb, white 84%, var(--tenant-primary));
}
@keyframes store-header-logo-skeleton {
@@ -113,4 +102,8 @@
.store-layout__brand-slot {
min-width: 0;
}
.store-layout__search {
min-width: 0;
}
}

63
src/app/core/layout/store-layout/store-header/store-header.component.ts
View File

@@ -1,62 +1,17 @@
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';
import { Component, Input } from '@angular/core';
export type StoreHeaderAction = {
label: string;
iconClass: string;
};
@Component({
selector: 'app-store-header',
imports: [CartIconComponent, IconButtonComponent, RouterLink, UserDropdownComponent],
imports: [],
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();
}
@Input({ required: true }) headerActions: StoreHeaderAction[] = [];
@Input() logoUrl: string | null = null;
}

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

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

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

@@ -1,76 +0,0 @@
: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;
}
}

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

@@ -1,17 +0,0 @@
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');
}

34
src/app/core/layout/store-layout/store-layout.component.html
View File

@@ -1,38 +1,8 @@
<div class="store-layout d-flex flex-column flex-grow-1">
<app-store-header
[cartQuantity]="cartQuantity()"
[logoUrl]="tenant()?.header_logo ?? null"
[user]="user()"
[isAuthenticated]="isAuthenticated()"
(cartClick)="isCartOpen.set(!isCartOpen())"
(loginClick)="onLoginClick()"
(logoutClick)="onLogoutClick()"
/>
@if (isCartOpen()) {
<div class="store-layout__cart-overlay" (click)="isCartOpen.set(false)"></div>
<div class="store-layout__cart-dropdown card border-0 shadow-lg">
<app-cart
[showClose]="true"
[items]="mappedCartItems()"
[subtotal]="cartSubtotal()"
[discount]="cartDiscount()"
[total]="cartTotal()"
[backgroundColor]="'#ffffff'"
(closed)="isCartOpen.set(false)"
>
<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>
}
<app-store-header [headerActions]="headerActions" [logoUrl]="tenant()?.header_logo ?? null" />
<main class="flex-grow-1 d-block">
<section class="py-5">
<div class="container-xl px-3 px-md-4">
<router-outlet />
</div>
</section>
<router-outlet />
</main>
<app-store-footer

57
src/app/core/layout/store-layout/store-layout.component.scss
View File

@@ -1,55 +1,12 @@
:host {
display: flex;
min-height: 100dvh;
background: #f5f5f5;
background:
radial-gradient(
circle at top,
color-mix(in srgb, white 88%, var(--tenant-primary)) 0%,
transparent 58%
),
#f6f6f6;
color: #202020;
}
.store-layout {
position: relative;
}
.store-layout__cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1040;
background: transparent;
}
.store-layout__cart-dropdown {
position: absolute;
top: 76px;
right: calc((100% - 1320px) / 2 + 1.5rem);
max-height: calc(100vh - 120px);
z-index: 1050;
background-color: #ffffff;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
overflow: hidden;
animation: store-layout-slide-down 0.2s ease-out;
@media (max-width: 1400px) {
right: 1.5rem;
}
@media (max-width: 576px) {
right: 1rem;
left: 1rem;
width: auto;
}
}
@keyframes store-layout-slide-down {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

139
src/app/core/layout/store-layout/store-layout.component.spec.ts
View File

@@ -1,16 +1,9 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { provideRouter, Router } from '@angular/router';
import { of } from 'rxjs';
import { provideRouter } from '@angular/router';
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 = {
@@ -21,9 +14,7 @@ const tenant: Tenant = {
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};
@@ -31,8 +22,6 @@ 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],
@@ -46,33 +35,6 @@ describe('StoreLayoutComponent', () => {
getTenant: () => tenantState(),
bootstrap: vi.fn().mockResolvedValue(undefined)
}
},
{
provide: CartService,
useValue: {
cart: signal(null).asReadonly(),
loadCart: () => of({ id: 1, items: [], subtotal: '0' }),
updateItemQuantity: vi.fn().mockReturnValue(of({ data: { id: 1, items: [], subtotal: '0' } })),
removeItem: vi.fn().mockReturnValue(of({ data: { id: 1, items: [], subtotal: '0' } }))
}
},
{
provide: ToastService,
useValue: {
show: vi.fn(),
info: vi.fn(),
danger: vi.fn(),
success: vi.fn(),
dismiss: vi.fn()
}
},
{
provide: AuthService,
useValue: {
user: authUserState,
isAuthenticated: isAuthenticatedState,
logout: vi.fn().mockReturnValue(of(void 0))
}
}
]
}).compileComponents();
@@ -111,101 +73,4 @@ 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);
});
});

134
src/app/core/layout/store-layout/store-layout.component.ts
View File

@@ -1,143 +1,59 @@
import { Component, computed, inject, OnInit, signal } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { Component, inject } from '@angular/core';
import { 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 { 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';
import { StoreFooterComponent, StoreFooterSection, StoreSocialLink } from './store-footer/store-footer.component';
import { StoreHeaderComponent, StoreHeaderAction } from './store-header/store-header.component';
@Component({
selector: 'app-store-layout',
imports: [
RouterOutlet,
StoreHeaderComponent,
StoreFooterComponent,
CartComponent,
ButtonComponent,
],
imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent],
templateUrl: './store-layout.component.html',
styleUrl: './store-layout.component.scss',
styleUrl: './store-layout.component.scss'
})
export class StoreLayoutComponent implements OnInit {
export class StoreLayoutComponent {
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);
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));
});
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 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();
if (!cart || !cart.items) return 0;
return cart.items.reduce((total, item) => total + item.cantidad, 0);
});
ngOnInit(): void {
this.cartService.loadCart().subscribe({
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 headerActions: StoreHeaderAction[] = [
{
label: 'Carrito',
iconClass: 'fa-solid fa-cart-shopping'
},
{
label: 'Mi cuenta',
iconClass: 'fa-solid fa-circle-user'
}
];
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'
}
];
}

30
src/app/core/services/api-paginated-response.interface.ts
View File

@@ -1,30 +0,0 @@
import { ApiResponse } from './api-response.interface';
export interface ApiPaginationMetaLink {
url: string | null;
label: string;
active: boolean;
}
export interface ApiPaginationMeta {
current_page: number;
from: number | null;
last_page: number;
links: ApiPaginationMetaLink[];
path: string;
per_page: number;
to: number | null;
total: number;
}
export interface ApiPaginationLinks {
first: string;
last: string;
prev: string | null;
next: string | null;
}
export interface ApiPaginatedResponse<T> extends ApiResponse<T> {
meta: ApiPaginationMeta;
links: ApiPaginationLinks;
}

4
src/app/core/services/api-pagination-query-params.interface.ts
View File

@@ -1,4 +0,0 @@
export interface ApiPaginationQueryParams {
page?: number;
per_page?: number;
}

5
src/app/core/services/api-response.interface.ts
View File

@@ -1,5 +0,0 @@
export interface ApiResponse<T> {
data: T;
message?: string;
errors?: Record<string, string[]>;
}

9
src/app/core/services/auth/auth-bootstrap.ts
View File

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

62
src/app/core/services/auth/auth.guards.spec.ts
View File

@@ -1,62 +0,0 @@
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);
});
});

18
src/app/core/services/auth/auth.guards.ts
View File

@@ -1,18 +0,0 @@
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;
};

96
src/app/core/services/auth/auth.interceptor.spec.ts
View File

@@ -1,96 +0,0 @@
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();
});
});

37
src/app/core/services/auth/auth.interceptor.ts
View File

@@ -1,37 +0,0 @@
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);
})
);
};

39
src/app/core/services/auth/auth.interfaces.ts
View File

@@ -1,39 +0,0 @@
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;
}

211
src/app/core/services/auth/auth.service.spec.ts
View File

@@ -1,211 +0,0 @@
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();
});
});

122
src/app/core/services/auth/auth.service.ts
View File

@@ -1,122 +0,0 @@
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;
}
}

23
src/app/core/services/cart/cart.interface.ts
View File

@@ -1,23 +0,0 @@
export interface CartItemProduct {
nombre: string;
imagen: string | null;
}
export type BuyableType = 'variant' | 'bundle';
export interface CartItem {
id: number;
cantidad: number;
precio_unitario: string;
buyable_type: BuyableType;
buyable_id: number;
product: CartItemProduct | null;
}
export interface Cart {
id: number | null;
tenant_codigo: string;
status: string;
items: CartItem[];
subtotal: string;
}

142
src/app/core/services/cart/cart.service.spec.ts
View File

@@ -1,142 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient } from '@angular/common/http';
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
import { CartService } from './cart.service';
import { TenantService } from '../tenant.service';
import { Cart } from './cart.interface';
describe('CartService', () => {
let service: CartService;
let httpMock: HttpTestingController;
let tenantServiceMock: any;
const mockCart: Cart = {
id: 123,
tenant_codigo: 'acme',
status: 'active',
items: [
{
id: 1,
cantidad: 2,
precio_unitario: '10.00',
buyable_type: 'variant',
buyable_id: 10,
product: {
nombre: 'Test Product (Size: M)',
imagen: null,
},
},
],
subtotal: '20.00',
};
beforeEach(() => {
tenantServiceMock = {
getTenantApiUrl: vi.fn().mockReturnValue('http://api.test/tenants/acme'),
tenant: vi.fn().mockReturnValue({ codigo: 'acme' }),
};
TestBed.configureTestingModule({
providers: [
CartService,
provideHttpClient(),
provideHttpClientTesting(),
{ provide: TenantService, useValue: tenantServiceMock },
],
});
service = TestBed.inject(CartService);
httpMock = TestBed.inject(HttpTestingController);
});
afterEach(() => {
httpMock.verify();
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it('should initialize with null cart signal', () => {
expect(service.cart()).toBeNull();
});
it('should load cart and update signal', () => {
service.loadCart().subscribe((cart) => {
expect(cart).toEqual(mockCart);
expect(service.cart()).toEqual(mockCart);
});
const req = httpMock.expectOne('http://api.test/tenants/acme/cart');
expect(req.request.method).toBe('GET');
expect(req.request.withCredentials).toBe(true);
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('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({
buyable_type: 'variant',
buyable_id: 10,
cantidad: 2,
});
expect(req.request.withCredentials).toBe(true);
req.flush({ data: mockCart });
});
it('should update item quantity and update signal', () => {
const updatedCart = { ...mockCart, subtotal: '30.00' };
updatedCart.items[0].cantidad = 3;
service.updateItemQuantity(10, 3).subscribe((res) => {
expect(res.data).toEqual(updatedCart);
expect(service.cart()).toEqual(updatedCart);
});
const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
expect(req.request.method).toBe('PATCH');
expect(req.request.body).toEqual({ cantidad: 3 });
expect(req.request.withCredentials).toBe(true);
req.flush({ data: updatedCart });
});
it('should remove item and update signal', () => {
const emptyCart: Cart = {
id: 123,
tenant_codigo: 'acme',
status: 'active',
items: [],
subtotal: '0.00',
};
service.removeItem(10).subscribe((res) => {
expect(res.data).toEqual(emptyCart);
expect(service.cart()).toEqual(emptyCart);
});
const req = httpMock.expectOne('http://api.test/tenants/acme/cart/items/10');
expect(req.request.method).toBe('DELETE');
expect(req.request.withCredentials).toBe(true);
req.flush({ data: emptyCart });
});
});

104
src/app/core/services/cart/cart.service.ts
View File

@@ -1,104 +0,0 @@
import { inject, Injectable, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, map, Observable, tap } from 'rxjs';
import { ApiResponse } from '../api-response.interface';
import { TenantService } from '../tenant.service';
import { BuyableType, Cart } from './cart.interface';
@Injectable({
providedIn: 'root',
})
export class CartService {
private readonly http = inject(HttpClient);
private readonly tenantService = inject(TenantService);
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,
})
.pipe(
map((response) => response.data),
tap((cart) => this.cartState.set(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`, { buyable_type: buyableType, buyable_id: buyableId, cantidad }, { withCredentials: true })
.pipe(
tap((response) => {
this.cartState.set(response.data);
this.isUpdatingState.set(false);
}),
catchError((error) => {
this.isUpdatingState.set(false);
throw error;
}),
);
}
updateItemQuantity(cartItemId: number, cantidad: number): Observable<ApiResponse<Cart>> {
this.isUpdatingState.set(true);
return this.http
.patch<
ApiResponse<Cart>
>(`${this.tenantApiUrl}/cart/items/${cartItemId}`, { cantidad }, { withCredentials: true })
.pipe(
tap((response) => {
this.cartState.set(response.data);
this.isUpdatingState.set(false);
}),
catchError((error) => {
this.isUpdatingState.set(false);
throw error;
}),
);
}
removeItem(cartItemId: number): Observable<ApiResponse<Cart>> {
this.isUpdatingState.set(true);
return this.http
.delete<
ApiResponse<Cart>
>(`${this.tenantApiUrl}/cart/items/${cartItemId}`, { withCredentials: true })
.pipe(
tap((response) => {
this.cartState.set(response.data);
this.isUpdatingState.set(false);
}),
catchError((error) => {
this.isUpdatingState.set(false);
throw error;
}),
);
}
}

55
src/app/core/services/catalog/catalog.interface.ts
View File

@@ -1,55 +0,0 @@
export interface Product {
id: number;
category_id: number;
brand_id: number | null;
slug: string;
nombre: string;
descripcion: string;
precio: string;
category: string;
brand: string | null;
images: string[];
}
export interface ProductAttributeOption {
id: number;
value: string;
label: string;
sort_order: number;
metadata: Record<string, unknown> | null;
}
export interface ProductAttribute {
id: number;
codigo: string;
nombre: string;
is_required: boolean;
metadata_schema: Record<string, unknown> | null;
type: string;
options: ProductAttributeOption[];
}
export type InventoryPolicy = 'tracked' | 'unlimited';
export interface ProductVariant {
id: number;
inventory_policy: InventoryPolicy;
cantidad_maxima: number | null;
cantidad_vendida: number;
definitions: Record<string, string>;
images: string[];
}
export interface ProductVariantMap {
variant_id: number;
inventory_policy: InventoryPolicy;
cantidad_maxima: number | null;
cantidad_vendida: number;
attributes: Record<string, string>;
}
export interface ProductDetail extends Product {
attributes: ProductAttribute[];
variants_map: ProductVariantMap[];
variant: ProductVariant | null;
}

67
src/app/core/services/catalog/catalog.service.ts
View File

@@ -1,67 +0,0 @@
import { inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { map, Observable } from 'rxjs';
import { ApiPaginationQueryParams } from '../api-pagination-query-params.interface';
import { ApiPaginatedResponse } from '../api-paginated-response.interface';
import { ApiResponse } from '../api-response.interface';
import { TenantService } from '../tenant.service';
import { Product, ProductDetail } from './catalog.interface';
type HttpParamValue =
| string
| number
| boolean
| readonly (string | number | boolean)[];
@Injectable({
providedIn: 'root'
})
export class CatalogService {
private readonly http = inject(HttpClient);
private readonly tenantService = inject(TenantService);
private get tenantApiUrl(): string {
return this.tenantService.getTenantApiUrl();
}
getProductos(
params?: ApiPaginationQueryParams
): Observable<ApiPaginatedResponse<Product[]>> {
return this.http.get<ApiPaginatedResponse<Product[]>>(
`${this.tenantApiUrl}/productos`,
{ params: this.buildHttpParams(params) }
);
}
getProducto(id: number, variantId?: number): Observable<ProductDetail> {
let params = new HttpParams();
if (variantId) {
params = params.set('variant_id', variantId);
}
return this.http
.get<ApiResponse<ProductDetail>>(`${this.tenantApiUrl}/productos/${id}`, { params })
.pipe(map((response) => response.data));
}
private buildHttpParams(params?: ApiPaginationQueryParams): HttpParams {
if (!params) {
return new HttpParams();
}
const fromObject = Object.entries(params).reduce<Record<string, HttpParamValue>>(
(acc, [key, value]) => {
if (value !== undefined) {
acc[key] = value;
}
return acc;
},
{}
);
return new HttpParams({ fromObject });
}
}

153
src/app/core/services/checkout.service.ts
View File

@@ -1,153 +0,0 @@
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;
}
}

59
src/app/core/services/cookie/cookie.service.ts
View File

@@ -1,59 +0,0 @@
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;
}
}

259
src/app/core/services/modal.service.spec.ts
View File

@@ -1,259 +0,0 @@
import '@angular/compiler';
import { Component, inject } from '@angular/core';
import { TestBed, getTestBed } from '@angular/core/testing';
import {
BrowserTestingModule,
platformBrowserTesting
} from '@angular/platform-browser/testing';
import {
afterEach,
beforeAll,
beforeEach,
describe,
expect,
it,
vi
} from 'vitest';
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,
ModalService
} from './modal.service';
@Component({
template: ''
})
class FirstTestModalComponent {}
@Component({
template: ''
})
class SecondTestModalComponent {}
describe('ModalService', () => {
let service: ModalService;
beforeAll(() => {
try {
getTestBed().initTestEnvironment(
BrowserTestingModule,
platformBrowserTesting()
);
} catch {
// Test environment may already be initialized by another setup entrypoint.
}
});
afterEach(() => {
TestBed.resetTestingModule();
});
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ModalService]
});
service = TestBed.inject(ModalService);
});
it('opens a modal and stores the normalized config', () => {
const ref = service.open(FirstTestModalComponent, {
title: 'Confirmar compra',
data: { productId: 10 },
size: 'lg',
closeOnBackdrop: false
});
const activeModal = service.activeModal();
expect(activeModal).not.toBeNull();
expect(activeModal?.component).toBe(FirstTestModalComponent);
expect(activeModal?.ref).toBe(ref);
expect(activeModal?.config).toEqual({
title: 'Confirmar compra',
data: { productId: 10 },
size: 'lg',
closeOnBackdrop: false,
closeOnEscape: true,
showCloseButton: true
});
});
it('emits the close result and clears the active modal', () => {
const ref = service.open(FirstTestModalComponent);
const closedSpy = vi.fn();
ref.afterClosed$.subscribe(closedSpy);
ref.close({ confirmed: true });
expect(closedSpy).toHaveBeenCalledWith({ confirmed: true });
expect(service.activeModal()).toBeNull();
expect(ref.dismissReason()).toBeNull();
});
it('tracks dismiss reasons when closing programmatically', () => {
const ref = service.open(FirstTestModalComponent);
const closedSpy = vi.fn();
ref.afterClosed$.subscribe(closedSpy);
ref.dismiss();
expect(closedSpy).toHaveBeenCalledWith(undefined);
expect(ref.dismissReason()).toBe('programmatic');
expect(service.activeModal()).toBeNull();
});
it('dismisses the current modal as replaced when another one opens', () => {
const firstRef = service.open(FirstTestModalComponent);
const firstClosedSpy = vi.fn();
firstRef.afterClosed$.subscribe(firstClosedSpy);
const secondRef = service.open(SecondTestModalComponent, {
title: 'Segundo modal'
});
expect(firstClosedSpy).toHaveBeenCalledWith(undefined);
expect(firstRef.dismissReason()).toBe('replaced');
expect(service.activeModal()?.ref).toBe(secondRef);
expect(service.activeModal()?.component).toBe(SecondTestModalComponent);
});
it('injects MODAL_DATA and ModalRef into opened components through the host injector contract', () => {
const ref = service.open(DataTestModalComponent, {
data: { amount: 3 }
});
const activeModal = service.activeModal();
expect(activeModal?.config.data).toEqual({ amount: 3 });
expect(activeModal?.ref).toBe(ref);
});
it('opens the standard confirm modal with default labels', () => {
const result$ = service.openConfirm({
title: 'Confirmar compra',
content: 'Esto confirmara la compra actual.'
});
const activeModal = service.activeModal();
expect(activeModal?.component).toBe(ConfirmModalComponent);
expect(result$).toBeDefined();
expect(activeModal?.config).toEqual({
title: 'Confirmar compra',
data: {
content: 'Esto confirmara la compra actual.',
confirmLabel: 'Confirmar',
cancelLabel: 'Cancelar'
},
size: 'md',
closeOnBackdrop: true,
closeOnEscape: true,
showCloseButton: true
});
});
it('maps the confirm modal close result to true', async () => {
const result$ = service.openConfirm({
title: 'Confirmar compra',
content: 'Esto confirmara la compra actual.'
});
const activeModal = service.activeModal();
const resultPromise = firstValueFrom(result$);
activeModal?.ref.close(true);
await expect(resultPromise).resolves.toBe(true);
});
it('maps dismissing a confirm modal to false', async () => {
const result$ = service.openConfirmDelete({
title: 'Eliminar producto',
content: 'Se eliminara el producto.'
});
const activeModal = service.activeModal();
const resultPromise = firstValueFrom(result$);
activeModal?.ref.dismiss('escape');
await expect(resultPromise).resolves.toBe(false);
});
it('opens the delete confirm modal preserving modal overrides', () => {
service.openConfirmDelete({
title: 'Eliminar producto',
content: 'Se eliminara el producto.',
confirmLabel: 'Eliminar',
cancelLabel: 'Conservar',
size: 'lg',
closeOnBackdrop: false,
closeOnEscape: false,
showCloseButton: false
});
const activeModal = service.activeModal();
expect(activeModal?.component).toBe(ConfirmDeleteModalComponent);
expect(activeModal?.config).toEqual({
title: 'Eliminar producto',
data: {
content: 'Se eliminara el producto.',
confirmLabel: 'Eliminar',
cancelLabel: 'Conservar'
},
size: 'lg',
closeOnBackdrop: false,
closeOnEscape: false,
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({
template: ''
})
class DataTestModalComponent {
readonly data = inject(MODAL_DATA);
readonly modalRef = inject(ModalRef);
}

253
src/app/core/services/modal.service.ts
View File

@@ -1,253 +0,0 @@
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 =
| 'backdrop'
| 'escape'
| 'programmatic'
| 'replaced';
export interface ModalConfig<TData = unknown> {
title?: string;
data?: TData;
size?: ModalSize;
closeOnBackdrop?: boolean;
closeOnEscape?: boolean;
showCloseButton?: boolean;
}
export interface NormalizedModalConfig<TData = unknown>
extends Omit<
ModalConfig<TData>,
'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
> {
size: ModalSize;
closeOnBackdrop: boolean;
closeOnEscape: boolean;
showCloseButton: boolean;
}
export interface ConfirmModalData {
content: string;
confirmLabel: string;
cancelLabel: string;
}
export interface ConfirmModalConfig
extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
content: string;
confirmLabel?: string;
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>;
ref: ModalRef<unknown>;
}
export const MODAL_DATA = new InjectionToken<unknown>('MODAL_DATA');
const DEFAULT_MODAL_CONFIG: Pick<
NormalizedModalConfig,
'size' | 'closeOnBackdrop' | 'closeOnEscape' | 'showCloseButton'
> = {
size: 'md',
closeOnBackdrop: true,
closeOnEscape: true,
showCloseButton: true
};
const DEFAULT_CONFIRM_MODAL_LABELS = {
confirmLabel: 'Confirmar',
cancelLabel: 'Cancelar'
} satisfies Pick<ConfirmModalData, 'confirmLabel' | 'cancelLabel'>;
export class ModalRef<TResult = unknown> {
private readonly afterClosedSubject = new Subject<TResult | undefined>();
private closed = false;
readonly afterClosed$: Observable<TResult | undefined> =
this.afterClosedSubject.asObservable();
readonly dismissReason = signal<ModalDismissReason | null>(null);
constructor(
private readonly closeHandler: (result?: TResult) => void,
private readonly dismissHandler: (reason: ModalDismissReason) => void
) {}
close(result?: TResult): void {
if (this.closed) {
return;
}
this.closeHandler(result);
}
dismiss(reason: ModalDismissReason = 'programmatic'): void {
if (this.closed) {
return;
}
this.dismissHandler(reason);
}
finalize(result?: TResult, dismissReason?: ModalDismissReason): void {
if (this.closed) {
return;
}
this.closed = true;
this.dismissReason.set(dismissReason ?? null);
this.afterClosedSubject.next(result);
this.afterClosedSubject.complete();
}
}
@Injectable({
providedIn: 'root'
})
export class ModalService {
private readonly activeModalState = signal<ActiveModalState | null>(null);
readonly activeModal = this.activeModalState.asReadonly();
open<TComponent, TResult = unknown, TData = unknown>(
component: Type<TComponent>,
config: ModalConfig<TData> = {}
): ModalRef<TResult> {
this.activeModalState()?.ref.dismiss('replaced');
let ref!: ModalRef<TResult>;
ref = new ModalRef<TResult>(
(result) => this.close(ref, result),
(reason) => this.dismiss(ref, reason)
);
this.activeModalState.set({
component,
config: this.normalizeConfig(config),
ref: ref as ModalRef<unknown>
});
return ref;
}
openConfirm(config: ConfirmModalConfig): Observable<boolean> {
return this.openConfirmRef(config).afterClosed$.pipe(
map((result) => result === true)
);
}
openConfirmDelete(config: ConfirmModalConfig): Observable<boolean> {
return this.openConfirmDeleteRef(config).afterClosed$.pipe(
map((result) => result === true)
);
}
openConfirmRef(config: ConfirmModalConfig): ModalRef<boolean> {
return this.open(ConfirmModalComponent, this.buildConfirmModalConfig(config));
}
openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
return this.open(
ConfirmDeleteModalComponent,
this.buildConfirmModalConfig(config)
);
}
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;
}
ref.finalize(result);
this.activeModalState.set(null);
}
private dismiss<TResult>(
ref: ModalRef<TResult>,
reason: ModalDismissReason = 'programmatic'
): void {
if (this.activeModalState()?.ref !== ref) {
return;
}
ref.finalize(undefined, reason);
this.activeModalState.set(null);
}
private normalizeConfig<TData>(
config: ModalConfig<TData>
): NormalizedModalConfig<TData> {
return {
...DEFAULT_MODAL_CONFIG,
...config
};
}
private buildConfirmModalConfig(
config: ConfirmModalConfig
): ModalConfig<ConfirmModalData> {
const {
content,
confirmLabel = DEFAULT_CONFIRM_MODAL_LABELS.confirmLabel,
cancelLabel = DEFAULT_CONFIRM_MODAL_LABELS.cancelLabel,
...modalConfig
} = config;
return {
...modalConfig,
data: {
content,
confirmLabel,
cancelLabel
}
};
}
private buildSimpleModalConfig(
config: SimpleModalConfig
): ModalConfig<SimpleModalData> {
const {
content,
buttonLabel = 'Entendido',
...modalConfig
} = config;
return {
...modalConfig,
data: {
content,
buttonLabel
}
};
}
}

4
src/app/core/services/tenant-ssr-cache.store.ts
View File

@@ -17,9 +17,7 @@ export const DEFAULT_TENANT_BRANDING = {
primaryColor: '#102bda',
secondaryColor: '#9e9e9e',
dangerColor: '#fd4c4c',
successColor: '#198754',
headerBgColor: '#313131',
footerBgColor: '#313131'
headerFooterBgColor: '#313131'
} as const;
export const TENANT_SSR_STATE_KEY = makeStateKey<TenantSsrState | null>('tenant-ssr-state');

45
src/app/core/services/tenant.interface.ts
View File

@@ -1,34 +1,3 @@
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;
@@ -37,17 +6,11 @@ export interface Tenant {
primary_color: string;
secondary_color: string;
danger_color: string;
success_color: string;
header_bg_color: string;
footer_bg_color: string;
header_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>;
export interface TenantBootstrapResponse {
data: Tenant;
}

4
src/app/core/services/tenant.service.spec.ts
View File

@@ -16,9 +16,7 @@ const tenant: Tenant = {
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};

9
src/app/core/services/tenant.service.ts
View File

@@ -40,15 +40,6 @@ export class TenantService {
return this.tenantState();
}
getTenantApiUrl(): string {
const tenant = this.tenantState();
if (!tenant) {
throw new Error('No se pudo resolver el tenant activo.');
}
return `${environment.url}tenants/${tenant.codigo}`;
}
async bootstrap(): Promise<void> {
if (this.statusState() !== 'idle') {
return;

101
src/app/core/services/toast.service.spec.ts
View File

@@ -1,101 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { vi } from 'vitest';
import { ToastService } from './toast.service';
describe('ToastService', () => {
let service: ToastService;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ToastService]
});
service = TestBed.inject(ToastService);
vi.useFakeTimers();
});
afterEach(() => {
vi.useRealTimers();
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it('should initialize with an empty list of toasts', () => {
expect(service.toasts()).toEqual([]);
});
it('should show a toast and assign an id', () => {
const id = service.show('Hello world', 'info');
expect(id).toBeTruthy();
expect(service.toasts().length).toBe(1);
expect(service.toasts()[0]).toEqual({
id,
message: 'Hello world',
type: 'info',
duration: 3000
});
});
it('should add specific variant toasts via helper methods', () => {
const infoId = service.info('Info message');
const dangerId = service.danger('Danger message', 5000);
const successId = service.success('Success message', 0);
const toasts = service.toasts();
expect(toasts.length).toBe(3);
expect(toasts.find((t) => t.id === infoId)).toEqual({
id: infoId,
message: 'Info message',
type: 'info',
duration: 3000
});
expect(toasts.find((t) => t.id === dangerId)).toEqual({
id: dangerId,
message: 'Danger message',
type: 'danger',
duration: 5000
});
expect(toasts.find((t) => t.id === successId)).toEqual({
id: successId,
message: 'Success message',
type: 'success',
duration: 0
});
});
it('should dismiss a toast manually by id', () => {
const id1 = service.show('Toast 1');
const id2 = service.show('Toast 2');
expect(service.toasts().length).toBe(2);
service.dismiss(id1);
expect(service.toasts().length).toBe(1);
expect(service.toasts()[0].id).toBe(id2);
});
it('should automatically dismiss a toast after the duration', () => {
service.show('Auto dismiss toast', 'info', 2000);
expect(service.toasts().length).toBe(1);
vi.advanceTimersByTime(2000);
expect(service.toasts().length).toBe(0);
});
it('should not dismiss a toast automatically if duration is 0', () => {
service.show('Persistent toast', 'info', 0);
expect(service.toasts().length).toBe(1);
vi.advanceTimersByTime(10000);
expect(service.toasts().length).toBe(1);
});
});

47
src/app/core/services/toast.service.ts
View File

@@ -1,47 +0,0 @@
import { Injectable, signal } from '@angular/core';
export interface Toast {
id: string;
message: string;
type: 'success' | 'danger' | 'info';
duration?: number;
}
@Injectable({
providedIn: 'root'
})
export class ToastService {
private readonly toastsSignal = signal<Toast[]>([]);
readonly toasts = this.toastsSignal.asReadonly();
show(message: string, type: 'success' | 'danger' | 'info' = 'info', duration = 3000): string {
const id = Math.random().toString(36).substring(2, 9);
const newToast: Toast = { id, message, type, duration };
this.toastsSignal.update((toasts) => [...toasts, newToast]);
if (duration > 0) {
setTimeout(() => {
this.dismiss(id);
}, duration);
}
return id;
}
info(message: string, duration = 3000): string {
return this.show(message, 'info', duration);
}
danger(message: string, duration = 3000): string {
return this.show(message, 'danger', duration);
}
success(message: string, duration = 3000): string {
return this.show(message, 'success', duration);
}
dismiss(id: string): void {
this.toastsSignal.update((toasts) => toasts.filter((t) => t.id !== id));
}
}

31
src/app/core/utils/use-mutation.spec.ts Normal file
View File

@@ -0,0 +1,31 @@
import { of, throwError } from 'rxjs';
import { describe, expect, it, vi } from 'vitest';
import { useMutation } from './use-mutation';
describe('useMutation', () => {
it('stores the resolved value and clears loading after a successful execution', async () => {
const mutation = useMutation<{ id: number }, { ok: boolean; id: number }>();
const factory = vi.fn((payload: { id: number }) => of({ ok: true, id: payload.id }));
await expect(mutation.execute(factory, { id: 7 })).resolves.toEqual({ ok: true, id: 7 });
expect(factory).toHaveBeenCalledWith({ id: 7 });
expect(mutation.loading()).toBe(false);
expect(mutation.error()).toBeNull();
expect(mutation.data()).toEqual({ ok: true, id: 7 });
});
it('stores the thrown error and clears loading after a failed execution', async () => {
const mutation = useMutation<{ id: number }, { ok: boolean }>();
const failure = new Error('request failed');
const factory = vi.fn(() => throwError(() => failure));
await expect(mutation.execute(factory, { id: 7 })).rejects.toThrow('request failed');
expect(factory).toHaveBeenCalledWith({ id: 7 });
expect(mutation.loading()).toBe(false);
expect(mutation.error()).toBe(failure);
expect(mutation.data()).toBeNull();
});
});

42
src/app/core/utils/use-mutation.ts Normal file
View File

@@ -0,0 +1,42 @@
import { signal, WritableSignal } from '@angular/core';
import { Observable, firstValueFrom } from 'rxjs';
export interface UseMutationResult<TData, TResult> {
loading: WritableSignal<boolean>;
error: WritableSignal<unknown | null>;
data: WritableSignal<TResult | null>;
execute: (factory: (payload: TData) => Observable<TResult>, payload: TData) => Promise<TResult>;
}
export function useMutation<TData, TResult>(): UseMutationResult<TData, TResult> {
const loading = signal(false);
const error = signal<unknown | null>(null);
const data = signal<TResult | null>(null);
async function execute(
factory: (payload: TData) => Observable<TResult>,
payload: TData
): Promise<TResult> {
loading.set(true);
error.set(null);
try {
const result = await firstValueFrom(factory(payload));
data.set(result);
return result;
} catch (err) {
error.set(err);
throw err;
} finally {
loading.set(false);
}
}
return {
loading,
error,
data,
execute
};
}

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

@@ -24,11 +24,8 @@
<div class="button-grid">
<app-button [disabled]="true">Primary</app-button>
<app-button variant="secondary" [disabled]="true">Secondary</app-button>
<app-button variant="danger" [disabled]="true">Danger</app-button>
<app-button variant="danger-secondary" [disabled]="true">
Danger secondary
</app-button>
<app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
<app-button variant="cancel" [disabled]="true">Cancel</app-button>
</div>
</div>
@@ -43,149 +40,10 @@
<app-button variant="cancel">E</app-button>
</div>
</div>
<div class="button-group">
<h2>Toasts</h2>
<div class="button-grid">
<app-button (click)="triggerToast('info')">Trigger Info</app-button>
<app-button variant="secondary" (click)="triggerToast('success')">
Trigger Success
</app-button>
<app-button variant="danger" (click)="triggerToast('danger')">
Trigger Danger
</app-button>
</div>
</div>
<div class="button-group">
<h2>Toasts Persistentes (No se van)</h2>
<div class="button-grid">
<app-button (click)="triggerPersistentToast('info')">
Info Persistente
</app-button>
<app-button
variant="secondary"
(click)="triggerPersistentToast('success')"
>
Success Persistente
</app-button>
<app-button variant="danger" (click)="triggerPersistentToast('danger')">
Danger Persistente
</app-button>
</div>
</div>
<div class="button-group">
<h2>Modal</h2>
<p class="text-muted mb-0">
Demo del modal global con servicio, host y devolucion de resultado.
</p>
<div class="button-grid">
<app-button (click)="openBasicModal()">Abrir confirm modal</app-button>
<app-button variant="danger" (click)="openConfirmDeleteModal()">
Abrir confirm delete
</app-button>
<app-button variant="secondary" (click)="openLockedModal()">
Abrir modal bloqueado
</app-button>
<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 }}
</div>
</div>
</div>
<hr class="section-divider" />
<div class="icon-button-showcase">
<h2>Icon Buttons</h2>
<p class="text-muted mb-4">
Botones de icono pequenos con color base <code>#666666</code>,
deshabilitados con <code>#A0A0A0</code> y estados hover/active con color
de marca (a excepcion de trash que usa danger).
</p>
<div class="icon-button-showcase__grid">
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Disabled</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" [disabled]="true" />
<app-icon-button variant="trash" [disabled]="true" />
<app-icon-button variant="angle-left" [disabled]="true" />
<app-icon-button variant="angle-right" [disabled]="true" />
<app-icon-button variant="angle-up" [disabled]="true" />
<app-icon-button variant="angle-down" [disabled]="true" />
<app-icon-button variant="copy" [disabled]="true" />
</div>
</div>
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Normal</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" />
<app-icon-button variant="trash" />
<app-icon-button variant="angle-left" />
<app-icon-button variant="angle-right" />
<app-icon-button variant="angle-up" />
<app-icon-button variant="angle-down" />
<app-icon-button variant="copy" />
</div>
</div>
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Active / Hover</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" class="hover-preview" />
<app-icon-button variant="trash" class="hover-preview" />
<app-icon-button variant="angle-left" class="hover-preview" />
<app-icon-button variant="angle-right" class="hover-preview" />
<app-icon-button variant="angle-up" class="hover-preview" />
<app-icon-button variant="angle-down" class="hover-preview" />
<app-icon-button variant="copy" class="hover-preview" />
</div>
</div>
</div>
</div>
<div class="icon-button-showcase mt-4">
<h2>Cart Icons</h2>
<p class="text-muted mb-4">
Icono de carrito con badge opcional indicando cantidad.
</p>
<div class="icon-button-showcase__grid">
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Disabled</span>
<div class="icon-button-showcase__items">
<app-cart-icon [disabled]="true" [quantity]="3" />
<app-cart-icon [disabled]="true" />
</div>
</div>
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Normal</span>
<div class="icon-button-showcase__items">
<app-cart-icon [quantity]="3" />
<app-cart-icon />
</div>
</div>
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Active / Hover</span>
<div class="icon-button-showcase__items">
<app-cart-icon [quantity]="3" class="hover-preview" />
<app-cart-icon class="hover-preview" />
</div>
</div>
</div>
</div>
<div class="input-grid">
<div class="input-field">
<label for="search-input">Texto</label>
@@ -313,167 +171,25 @@
/>
</div>
<app-button variant="secondary" (click)="clearFile()">
Limpiar archivo
</app-button>
<app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
</div>
</div>
<hr class="section-divider" />
<div class="paginator-showcase">
<h2>Paginator</h2>
<p class="text-muted mb-0">
Componente shared para navegar por paginas con primera, anterior,
siguiente y ultima.
</p>
<app-paginator
[page]="currentPage"
[totalPages]="paginatorTotalPages"
(pageChange)="currentPage = $event"
/>
</div>
<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>
<h2>Carrito mock</h2>
<p class="text-muted mb-0">
Demo visual aislada del carrito con scroll a partir del cuarto item.
</p>
</div>
@if (!cartVisible) {
<app-button variant="secondary" (click)="showCart()">
Volver a mostrar carrito
</app-button>
}
</div>
@if (cartVisible) {
<div class="cart-showcase__viewport">
<app-cart
[showClose]="true"
[items]="cartMockItems"
[subtotal]="366000"
[discount]="66000"
[total]="300000"
[backgroundColor]="cartBackgroundColor"
(closed)="hideCart()"
/>
</div>
}
</div>
</div>
</section>
<section class="component-demo card shadow-sm mt-4 configuracion-tennant">
<div class="card-body">
<span class="eyebrow">Tenant Configuration</span>
<h2 class="mb-4">Configuracion Tenant</h2>
<h2 class="mb-4">Configuración Tenant</h2>
<!-- Logos section -->
<div class="row mb-4">
<div class="col-md-6 mb-3 mb-md-0">
<div class="tenant-logo-card">
<div class="tenant-logo-card__label">Logo del Header</div>
<div class="tenant-logo-card__container header-bg">
<div class="tenant-logo-card__container header-footer-bg">
@if (tenant()?.header_logo) {
<img
[src]="tenant()?.header_logo"
alt="Header Logo"
class="tenant-logo-card__img"
/>
<img [src]="tenant()?.header_logo" alt="Header Logo" class="tenant-logo-card__img" />
} @else {
<div class="tenant-logo-card__placeholder">
<i class="fa-solid fa-image mb-2"></i>
@@ -487,13 +203,9 @@
<div class="col-md-6">
<div class="tenant-logo-card">
<div class="tenant-logo-card__label">Logo del Footer</div>
<div class="tenant-logo-card__container footer-bg">
<div class="tenant-logo-card__container header-footer-bg">
@if (tenant()?.footer_logo) {
<img
[src]="tenant()?.footer_logo"
alt="Footer Logo"
class="tenant-logo-card__img"
/>
<img [src]="tenant()?.footer_logo" alt="Footer Logo" class="tenant-logo-card__img" />
} @else {
<div class="tenant-logo-card__placeholder">
<i class="fa-solid fa-image mb-2"></i>
@@ -507,95 +219,36 @@
<hr class="section-divider" />
<!-- Colors section -->
<div class="colors-section">
<h3 class="mb-3">Colores de Marca</h3>
<div class="row">
<div class="col-md-3 mb-3">
<div class="col-md-4 mb-3">
<div class="color-swatch-card shadow-sm">
<div
class="color-swatch-card__preview"
[style.background-color]="'var(--tenant-primary)'"
></div>
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-primary)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Primario</span>
<code class="color-swatch-card__value">
{{ tenant()?.primary_color || 'Default' }}
</code>
<code class="color-swatch-card__value">{{ tenant()?.primary_color || 'Default' }}</code>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="col-md-4 mb-3">
<div class="color-swatch-card shadow-sm">
<div
class="color-swatch-card__preview"
[style.background-color]="'var(--tenant-secondary)'"
></div>
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-secondary)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Secundario</span>
<code class="color-swatch-card__value">
{{ tenant()?.secondary_color || 'Default' }}
</code>
<code class="color-swatch-card__value">{{ tenant()?.secondary_color || 'Default' }}</code>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="col-md-4 mb-3">
<div class="color-swatch-card shadow-sm">
<div
class="color-swatch-card__preview"
[style.background-color]="'var(--tenant-danger)'"
></div>
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-danger)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Danger</span>
<code class="color-swatch-card__value">
{{ tenant()?.danger_color || 'Default' }}
</code>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div
class="color-swatch-card__preview"
[style.background-color]="'var(--tenant-success)'"
></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Success</span>
<code class="color-swatch-card__value">
{{ tenant()?.success_color || 'Default' }}
</code>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div
class="color-swatch-card__preview"
[style.background-color]="'var(--tenant-header-bg)'"
></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Header BG</span>
<code class="color-swatch-card__value">
{{ tenant()?.header_bg_color || 'Default' }}
</code>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div
class="color-swatch-card__preview"
[style.background-color]="'var(--tenant-footer-bg)'"
></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Footer BG</span>
<code class="color-swatch-card__value">
{{ tenant()?.footer_bg_color || 'Default' }}
</code>
<code class="color-swatch-card__value">{{ tenant()?.danger_color || 'Default' }}</code>
</div>
</div>
</div>
@@ -603,54 +256,4 @@
</div>
</div>
</section>
<section class="component-demo card shadow-sm mt-4">
<div class="card-body">
<span class="eyebrow">Reusable Component</span>
<h2 class="mb-4">Tarjetas de Producto (ProductCard)</h2>
<p class="text-muted mb-4">
Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se
presentan dentro de una grilla de Bootstrap.
</p>
<div class="row">
@for (product of testProducts; track product.title) {
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
<app-product-card
[imageUrl]="product.imageUrl"
[title]="product.title"
[originalPrice]="product.originalPrice"
[discount]="product.discount"
[transferPrice]="product.transferPrice"
(buy)="onProductBuy(product.title)"
/>
</div>
}
</div>
</div>
</section>
<app-store-section
title="PRODUCTOS"
class="component-demo store-section-demo mt-5"
>
<div class="row">
@for (product of testProducts; track product.title) {
<div
class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch store-section-demo__item"
>
<app-product-card
[imageUrl]="product.imageUrl"
[title]="product.title"
[originalPrice]="product.originalPrice"
[discount]="product.discount"
[transferPrice]="product.transferPrice"
(buy)="onProductBuy(product.title)"
/>
</div>
}
</div>
</app-store-section>
</main>

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

@@ -15,10 +15,6 @@
border: 0;
}
.store-section-demo {
width: min(100%, 64rem);
}
.eyebrow {
display: inline-block;
margin-bottom: 0.75rem;
@@ -49,92 +45,16 @@ h1 {
gap: 0.75rem;
}
.modal-showcase__result {
padding: 0.875rem 1rem;
border: 1px dashed rgba(32, 32, 32, 0.14);
border-radius: 0.875rem;
background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98));
color: #495057;
font-size: 0.95rem;
}
:host ::ng-deep .modal-demo-content {
display: grid;
gap: 1rem;
}
:host ::ng-deep .modal-demo-content__eyebrow {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6c757d;
}
:host ::ng-deep .modal-demo-content__title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
color: #202020;
}
:host ::ng-deep .modal-demo-content__description {
margin: 0;
color: #505050;
line-height: 1.6;
}
:host ::ng-deep .modal-demo-content__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.75rem;
}
.button-group h2 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.paginator-showcase {
display: grid;
justify-items: center;
gap: 0.75rem;
text-align: center;
}
.cart-showcase {
display: grid;
gap: 1rem;
justify-items: start;
}
.cart-showcase__viewport {
width: 100%;
max-width: 504px;
height: 640px;
}
.cart-showcase__header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.button-grid--single-char app-button {
min-width: 3rem;
}
.store-section-demo__item {
app-product-card {
width: 100%;
}
}
.section-divider {
margin: 2rem 0;
}
@@ -171,15 +91,6 @@ h1 {
.input-grid {
grid-template-columns: minmax(0, 1fr);
}
.cart-showcase__header {
align-items: start;
flex-direction: column;
}
.modal-showcase__result {
font-size: 0.875rem;
}
}
.configuracion-tennant {
@@ -236,12 +147,8 @@ h1 {
}
}
.header-bg {
background-color: var(--tenant-header-bg, #f8f9fa);
}
.footer-bg {
background-color: var(--tenant-footer-bg, #f8f9fa);
.header-footer-bg {
background-color: var(--tenant-header-footer-bg, #f8f9fa);
}
.color-swatch-card {
@@ -291,44 +198,3 @@ h1 {
}
}
}
.icon-button-showcase {
display: grid;
gap: 1.5rem;
&__grid {
display: grid;
gap: 1.5rem;
background-color: #eaeaea;
padding: 1.5rem;
border-radius: 8px;
border: 1px solid #dee2e6;
}
&__row {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: 1.5rem;
@media (max-width: 575.98px) {
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
}
}
&__label {
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
color: #495057;
letter-spacing: 0.05em;
}
&__items {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
}
}

202
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts
View File

@@ -1,17 +1,8 @@
import { signal } from '@angular/core';
import { TestBed, getTestBed } from '@angular/core/testing';
import {
BrowserTestingModule,
platformBrowserTesting
} from '@angular/platform-browser/testing';
import { of } from 'rxjs';
import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
import { ModalService } from '../../../../core/services/modal.service';
import { TestBed } from '@angular/core/testing';
import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
import { Tenant } from '../../../../core/services/tenant.interface';
import { TenantService } from '../../../../core/services/tenant.service';
import { ToastService } from '../../../../core/services/toast.service';
import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
const tenant: Tenant = {
id: 1,
@@ -21,9 +12,7 @@ const tenant: Tenant = {
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};
@@ -40,54 +29,14 @@ function createTenantServiceStub(currentTenant: Tenant | null) {
};
}
function createToastServiceStub() {
return {
success: vi.fn(),
danger: vi.fn(),
info: vi.fn()
};
}
function createModalServiceStub() {
return {
open: vi.fn(),
openConfirm: vi.fn().mockReturnValue(of(true)),
openConfirmDelete: vi.fn().mockReturnValue(of(false))
};
}
describe('ReutilizablesTestPageComponent', () => {
beforeAll(() => {
try {
getTestBed().initTestEnvironment(
BrowserTestingModule,
platformBrowserTesting()
);
} catch {
// Test environment may already be initialized by another setup entrypoint.
}
});
afterEach(() => {
TestBed.resetTestingModule();
});
it('renders the tenant configuration section with logo sources and swatch colors', async () => {
const modalServiceStub = createModalServiceStub();
await TestBed.configureTestingModule({
imports: [ReutilizablesTestPageComponent],
providers: [
{
provide: TenantService,
useValue: createTenantServiceStub(tenant)
},
{
provide: ToastService,
useValue: createToastServiceStub()
},
{
provide: ModalService,
useValue: modalServiceStub
}
]
}).compileComponents();
@@ -96,151 +45,22 @@ describe('ReutilizablesTestPageComponent', () => {
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
// Check section title
const sectionTitle = element.querySelector('.configuracion-tennant h2');
expect(sectionTitle?.textContent).toContain('Configuración Tenant');
expect(sectionTitle?.textContent).toContain('Configuracion Tenant');
const headerImg = element.querySelector(
'.tenant-logo-card img[alt="Header Logo"]'
) as HTMLImageElement;
// Check header logo source
const headerImg = element.querySelector('.tenant-logo-card img[alt="Header Logo"]') as HTMLImageElement;
expect(headerImg?.src).toBe(tenant.header_logo);
const footerImg = element.querySelector(
'.tenant-logo-card img[alt="Footer Logo"]'
) as HTMLImageElement;
// Check footer logo source
const footerImg = element.querySelector('.tenant-logo-card img[alt="Footer Logo"]') as HTMLImageElement;
expect(footerImg?.src).toBe(tenant.footer_logo);
// Check color hex values
expect(element.textContent).toContain(tenant.primary_color);
expect(element.textContent).toContain(tenant.secondary_color);
expect(element.textContent).toContain(tenant.danger_color);
expect(element.textContent).toContain(tenant.success_color);
});
it('renders the paginator demo with the initial page status', 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;
expect(element.querySelector('app-paginator')).not.toBeNull();
expect(
element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()
).toBe('1/8');
});
it('renders the modal showcase and opens the confirm demos from the buttons', 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 buttons = Array.from(
element.querySelectorAll('.button-group app-button button')
);
const confirmButton = buttons.find((button) =>
button.textContent?.includes('Abrir confirm modal')
) as HTMLButtonElement;
const deleteButton = buttons.find((button) =>
button.textContent?.includes('Abrir confirm delete')
) as HTMLButtonElement;
expect(
element.querySelector('[data-testid="modal-last-result"]')?.textContent
).toContain('Todavia no se abrio ningun modal.');
confirmButton.click();
fixture.detectChanges();
deleteButton.click();
fixture.detectChanges();
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');
});
});

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

@@ -1,45 +1,16 @@
import { Component, inject } from '@angular/core';
import { ButtonComponent } from '../../../../shared/components/button/button.component';
import {
CartComponent,
CartItemMock
} from '../../../../shared/components/cart/cart.component';
import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
import { InputComponent } from '../../../../shared/components/input/input.component';
import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
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',
imports: [
ButtonComponent,
CartComponent,
InputComponent,
PaginatorComponent,
ProductCardComponent,
StoreSectionComponent,
IconButtonComponent,
CartIconComponent,
StepperComponent,
StepComponent
],
imports: [ButtonComponent, InputComponent],
templateUrl: './reutilizables-test-page.component.html',
styleUrl: './reutilizables-test-page.component.scss'
})
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';
@@ -56,91 +27,6 @@ export class ReutilizablesTestPageComponent {
protected fileName = '';
protected clearTrigger = 0;
protected editableDisabled = true;
protected currentPage = 1;
protected cartVisible = true;
protected lastModalResult = 'Todavia no se abrio ningun modal.';
protected readonly paginatorTotalPages = 8;
protected readonly cartBackgroundColor = '#ffffff';
protected readonly testProducts = [
{
title: 'Pantalon recto de scuba negro',
originalPrice: 95000,
discount: 20,
transferPrice: 74800,
imageUrl: '/images/pantalon-scuba.png'
},
{
title: 'Zapatillas de running azul',
originalPrice: 120000,
discount: 15,
transferPrice: 98000,
imageUrl: '/images/zapatillas-running.png'
},
{
title: 'Remera basica blanca (Sin Descuento)',
originalPrice: 32000,
discount: null,
transferPrice: 30000,
imageUrl: null
}
];
protected readonly cartMockItems: CartItemMock[] = [
{
imageUrl: null,
product: 'Calza termica unisex con proceso sense y cintura con mayor agarre',
originalPrice: 95000,
discountedPrice: 76000,
discountPercentage: 20,
quantity: 1,
attributes: [
{ label: 'Color', value: 'Beige' },
{ label: 'Talle', value: 'S' }
]
},
{
imageUrl: null,
product: 'Pantalon recto de scuba negro',
originalPrice: null,
discountedPrice: 89000,
discountPercentage: null,
quantity: 1,
attributes: [
{ label: 'Color', value: 'Beige' },
{ label: 'Talle', value: 'S' }
]
},
{
imageUrl: null,
product: 'Top de supplex color habano',
originalPrice: 98000,
discountedPrice: 85000,
discountPercentage: 20,
quantity: 1,
attributes: [
{ label: 'Color', value: 'Negro' },
{ label: 'Talle', value: 'XL' }
]
},
{
imageUrl: null,
product: 'Buzo oversize canguro gris',
originalPrice: 72000,
discountedPrice: 69000,
discountPercentage: 5,
quantity: 2,
attributes: [
{ label: 'Color', value: 'Gris' },
{ label: 'Talle', value: 'M' }
]
}
];
protected onProductBuy(productTitle: string): void {
console.log(`Comprando: ${productTitle}`);
alert(`Comprando: ${productTitle}`);
}
protected onFileChange(file: File | null): void {
this.fileName = file?.name ?? '';
@@ -150,112 +36,4 @@ export class ReutilizablesTestPageComponent {
this.fileName = '';
this.clearTrigger += 1;
}
protected showCart(): void {
this.cartVisible = true;
}
protected hideCart(): void {
this.cartVisible = false;
this.toastService.info('Se disparo el evento de cerrado del carrito mock.');
}
protected triggerToast(type: 'success' | 'danger' | 'info'): void {
if (type === 'success') {
this.toastService.success(
'Operacion exitosa. El producto se ha guardado correctamente.'
);
} else if (type === 'danger') {
this.toastService.danger(
'Alerta de error. Hubo un problema al procesar la solicitud.'
);
} else if (type === 'info') {
this.toastService.info(
'Informacion del sistema: Hay una nueva actualizacion disponible.'
);
}
}
protected triggerPersistentToast(type: 'success' | 'danger' | 'info'): void {
if (type === 'success') {
this.toastService.success(
'Exito persistente. Esta alerta no se cerrara sola.',
0
);
} else if (type === 'danger') {
this.toastService.danger(
'Error persistente. Por favor, atienda este problema y cierrelo manualmente.',
0
);
} else if (type === 'info') {
this.toastService.info(
'Informacion persistente: Mantendremos este aviso en pantalla.',
0
);
}
}
protected openBasicModal(): void {
this.openConfirmModal({
title: 'Confirmar accion',
content:
'Caso base para verificar apertura, cierre y devolucion de resultado.',
confirmLabel: 'Confirmar'
});
}
protected openConfirmDeleteModal(): void {
this.openConfirmDelete({
title: 'Eliminar producto',
content:
'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
confirmLabel: 'Eliminar'
});
}
protected openLockedModal(): void {
this.openConfirmModal({
title: 'Modal bloqueado',
content:
'Este modal no se cierra tocando el backdrop ni con la tecla Escape.',
confirmLabel: 'Entendido',
closeOnBackdrop: false,
closeOnEscape: false
});
}
protected openWideModal(): void {
this.openConfirmModal({
title: 'Modal ancho',
content: 'Demuestra una variante visual mas amplia para contenido mas pesado.',
confirmLabel: 'Seguir',
size: 'xl'
});
}
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}`;
});
}
}

40
src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.html
View File

@@ -1,40 +0,0 @@
<div class="attribute-selector">
@for (attribute of attributes(); track attribute.id) {
<div class="attribute-selector__row">
<span class="attribute-selector__label">{{ attribute.nombre }}:</span>
<div class="attribute-selector__options">
@for (option of attribute.options; track option.id) {
@if (isColorOption(option)) {
<button
type="button"
class="attribute-selector__swatch"
[class.attribute-selector__swatch--selected]="hasSelectedOption(attribute, option)"
[class.attribute-selector__swatch--disabled]="!availableOptions()[attribute.id][option.id]"
[style.background-color]="getOptionSwatchColor(option)"
[attr.aria-label]="option.label"
[attr.aria-pressed]="hasSelectedOption(attribute, option)"
[title]="option.label"
[disabled]="!availableOptions()[attribute.id][option.id]"
(click)="selectAttributeOption(attribute, option)"
>
<span class="visually-hidden">{{ option.label }}</span>
</button>
} @else {
<button
type="button"
class="attribute-selector__text-option"
[class.attribute-selector__text-option--selected]="hasSelectedOption(attribute, option)"
[class.attribute-selector__text-option--disabled]="!availableOptions()[attribute.id][option.id]"
[attr.aria-pressed]="hasSelectedOption(attribute, option)"
[disabled]="!availableOptions()[attribute.id][option.id]"
(click)="selectAttributeOption(attribute, option)"
>
{{ option.label }}
</button>
}
}
</div>
</div>
}
</div>

83
src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss
View File

@@ -1,83 +0,0 @@
.attribute-selector {
display: flex;
flex-direction: column;
gap: 1.25rem;
&__row {
display: flex;
align-items: center;
gap: 0.875rem;
flex-wrap: wrap;
}
&__label {
font-size: 15px;
font-weight: 700;
line-height: 1.2;
color: #A0A0A0;
min-width: 44px;
}
&__options {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
&__swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid transparent;
padding: 0;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
&:hover {
transform: scale(1.05);
}
&--selected {
border-color: var(--tenant-primary);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 1),
0 0 0 3px var(--tenant-primary);
}
&--disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
}
&__text-option {
border: 1px solid #dcdcdc;
background: #ffffff;
color: #666666;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
min-width: 34px;
min-height: 34px;
border-radius: 4px;
padding: 0.35rem 0.6rem;
font-size: 16px;
font-weight: 700;
line-height: 1;
&--selected {
background: var(--tenant-primary);
border-color: var(--tenant-primary);
color: #ffffff;
}
&--disabled {
opacity: 0.4;
cursor: not-allowed;
background-color: #f9f9f9;
color: #b0b0b0;
pointer-events: none;
}
}
}

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

@@ -1,75 +0,0 @@
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);
});
});

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

@@ -1,281 +0,0 @@
import {
ChangeDetectionStrategy,
Component,
computed,
effect,
input,
output,
signal,
untracked,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import {
ProductAttribute,
ProductAttributeOption,
ProductVariant,
ProductVariantMap,
} from '../../../../core/services/catalog/catalog.interface';
@Component({
selector: 'app-product-attribute-selector',
standalone: true,
imports: [CommonModule],
templateUrl: './product-attribute-selector.component.html',
styleUrl: './product-attribute-selector.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductAttributeSelectorComponent {
public attributes = input<ProductAttribute[]>([]);
public variantsMap = input<ProductVariantMap[]>([]);
public defaultVariant = input<ProductVariant | null>(null);
public variantChange = output<ProductVariantMap | null>();
protected readonly selectedAttributeOptions = signal<Record<number, number>>({});
protected readonly availableOptions = computed(() => {
const selections = this.selectedAttributeOptions();
const variants = this.variantsMap();
const attributes = this.attributes();
const availability: Record<number, Record<number, boolean>> = {};
for (const attribute of attributes) {
availability[attribute.id] = {};
for (const option of attribute.options) {
const optionNormalized = this.normalizeText(option.value || option.label);
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;
}
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;
}
}
}
}
return true;
});
availability[attribute.id][option.id] = isAvailable;
}
}
return availability;
});
public reset(): void {
this.initializeSelections(this.attributes(), this.defaultVariant());
}
constructor() {
effect(() => {
const attributes = this.attributes();
const defaultVariant = this.defaultVariant();
untracked(() => {
this.initializeSelections(attributes, defaultVariant);
});
});
effect(() => {
const selections = this.selectedAttributeOptions();
const variantsMap = this.variantsMap();
const attributes = this.attributes();
untracked(() => {
this.emitMatchingVariant(selections, variantsMap, attributes);
});
});
}
protected hasSelectedOption(
attribute: ProductAttribute,
option: ProductAttributeOption,
): boolean {
return this.selectedAttributeOptions()[attribute.id] === option.id;
}
protected selectAttributeOption(
attribute: ProductAttribute,
option: ProductAttributeOption,
): void {
this.selectedAttributeOptions.update((current) => ({
...current,
[attribute.id]: option.id,
}));
}
protected isColorOption(option: ProductAttributeOption): boolean {
return this.findFirstHexValue(option.metadata) !== null;
}
protected getOptionSwatchColor(option: ProductAttributeOption): string {
return this.findFirstHexValue(option.metadata) ?? '#D9D9D9';
}
private initializeSelections(
attributes: ProductAttribute[],
defaultVariant: ProductVariant | null,
): void {
const selections: Record<number, number> = {};
for (const attribute of attributes) {
const optionId = this.findDefaultOptionId(attribute, defaultVariant);
if (optionId !== null) {
selections[attribute.id] = optionId;
}
}
this.selectedAttributeOptions.set(selections);
}
private findDefaultOptionId(
attribute: ProductAttribute,
variant: ProductVariant | null,
): number | null {
if (!variant) {
return null;
}
const defaultValue = this.getDefaultVariantAttributeValue(attribute, variant.definitions);
if (!defaultValue) {
return null;
}
const normalizedValue = this.normalizeText(defaultValue);
const matchByValue = attribute.options.find(
(option) => this.normalizeText(option.value) === normalizedValue,
);
if (matchByValue) {
return matchByValue.id;
}
const matchByLabel = attribute.options.find(
(option) => this.normalizeText(option.label) === normalizedValue,
);
return matchByLabel?.id ?? null;
}
private getDefaultVariantAttributeValue(
attribute: ProductAttribute,
variantAttributes: Record<string, string>,
): string | null {
const normalizedCodigo = this.normalizeText(attribute.codigo);
const normalizedNombre = this.normalizeText(attribute.nombre);
for (const [key, value] of Object.entries(variantAttributes)) {
const normalizedKey = this.normalizeText(key);
if (normalizedKey === normalizedCodigo || normalizedKey === normalizedNombre) {
return value;
}
}
return null;
}
private normalizeText(value: string | null | undefined): string {
return (value ?? '')
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.trim()
.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/);
return match ? match[0] : null;
}
if (Array.isArray(value)) {
for (const item of value) {
const found = this.findFirstHexValue(item);
if (found) {
return found;
}
}
return null;
}
if (value && typeof value === 'object') {
for (const item of Object.values(value)) {
const found = this.findFirstHexValue(item);
if (found) {
return found;
}
}
}
return null;
}
private emitMatchingVariant(
selections: Record<number, number>,
variantsMap: ProductVariantMap[],
attributes: ProductAttribute[],
): void {
if (attributes.length === 0 || variantsMap.length === 0) {
this.variantChange.emit(null);
return;
}
const selectedValuesById: Record<number, string> = {};
let allSelected = true;
for (const attr of attributes) {
const selectedOptionId = selections[attr.id];
if (selectedOptionId === undefined) {
allSelected = false;
break;
}
const option = attr.options.find((o) => o.id === selectedOptionId);
if (option) {
selectedValuesById[attr.id] = this.normalizeText(option.value || option.label);
}
}
if (!allSelected) {
this.variantChange.emit(null);
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;
});
});
this.variantChange.emit(matchingVariant || null);
}
}

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

@@ -1,70 +0,0 @@
<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">
<!-- Main Image -->
@if (images().length > 0) {
<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>
}
<!-- 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>
}
<!-- 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--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>

92
src/app/features/store/components/product-carousel/product-carousel.component.scss
View File

@@ -1,92 +0,0 @@
.product-carousel {
width: 100%;
&__main {
aspect-ratio: 1 / 1;
width: 100%;
background-color: #e0e0e0 !important;
/* Matches grey placeholder in mock */
display: flex;
align-items: center;
justify-content: center;
}
&__main-image {
display: block;
padding: 0;
transition: transform 0.3s ease;
}
&__placeholder {
height: 100%;
background-color: #e0e0e0;
}
&__discount-badge {
top: 0 !important;
right: 0 !important;
background-color: var(--tenant-primary, #6376F3) !important;
border-bottom-left-radius: 4px;
font-size: 0.9rem;
letter-spacing: 0.5px;
padding: 0.5rem 1rem !important;
}
&__nav-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2) !important;
color: #ffffff !important;
font-size: 0.9rem;
transition: background-color 0.2s ease, transform 0.2s ease;
z-index: 10;
&:hover {
background-color: rgba(0, 0, 0, 0.4) !important;
transform: translateY(-50%) scale(1.05);
}
&--prev {
left: 16px !important;
}
&--next {
right: 16px !important;
}
}
&__thumbnails {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
}
&__thumbnail {
width: 100%;
aspect-ratio: 1 / 1;
background-color: #e0e0e0 !important;
/* Matches mock layout */
padding: 0;
transition: opacity 0.2s ease, border-color 0.2s ease;
border: 3px solid transparent !important;
cursor: pointer;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover {
opacity: 0.9;
}
&--active {
border-color: var(--tenant-primary, #6376F3) !important;
opacity: 1;
}
}
}

90
src/app/features/store/components/product-carousel/product-carousel.component.spec.ts
View File

@@ -1,90 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { beforeEach, describe, expect, it } from 'vitest';
import { ProductCarouselComponent } from './product-carousel.component';
describe('ProductCarouselComponent', () => {
const mockImages = [
'https://example.com/img1.png',
'https://example.com/img2.png',
'https://example.com/img3.png'
];
beforeEach(() => {
TestBed.resetTestingModule();
});
async function createComponent(images: string[] = [], discount: number | null = null) {
await TestBed.configureTestingModule({
imports: [ProductCarouselComponent]
}).compileComponents();
const fixture = TestBed.createComponent(ProductCarouselComponent);
const component = fixture.componentInstance;
// Set signals input values
fixture.componentRef.setInput('images', images);
fixture.componentRef.setInput('discount', discount);
fixture.detectChanges();
return { fixture, component };
}
it('should create and start at activeIndex 0', async () => {
const { component } = await createComponent(mockImages);
expect(component).toBeTruthy();
expect(component.activeIndex()).toBe(0);
});
it('should cycle through images on nextImage', async () => {
const { component } = await createComponent(mockImages);
expect(component.activeIndex()).toBe(0);
component.nextImage();
expect(component.activeIndex()).toBe(1);
component.nextImage();
expect(component.activeIndex()).toBe(2);
component.nextImage(); // Should wrap around to 0
expect(component.activeIndex()).toBe(0);
});
it('should cycle backwards on prevImage', async () => {
const { component } = await createComponent(mockImages);
expect(component.activeIndex()).toBe(0);
component.prevImage(); // Should wrap around to end (2)
expect(component.activeIndex()).toBe(2);
component.prevImage();
expect(component.activeIndex()).toBe(1);
});
it('should set activeIndex on selectImage', async () => {
const { component } = await createComponent(mockImages);
expect(component.activeIndex()).toBe(0);
component.selectImage(2);
expect(component.activeIndex()).toBe(2);
// If out of bounds, should not change
component.selectImage(5);
expect(component.activeIndex()).toBe(2);
});
it('should render discount badge if provided', async () => {
const { fixture } = await createComponent(mockImages, 20);
const element = fixture.nativeElement as HTMLElement;
const badge = element.querySelector('.product-carousel__discount-badge');
expect(badge).not.toBeNull();
expect(badge?.textContent?.trim()).toBe('-20%');
});
it('should not render discount badge if not provided', async () => {
const { fixture } = await createComponent(mockImages);
const element = fixture.nativeElement as HTMLElement;
const badge = element.querySelector('.product-carousel__discount-badge');
expect(badge).toBeNull();
});
});

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

@@ -1,38 +0,0 @@
import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
import { CommonModule, NgOptimizedImage } from '@angular/common';
@Component({
selector: 'app-product-carousel',
standalone: true,
imports: [CommonModule, NgOptimizedImage],
templateUrl: './product-carousel.component.html',
styleUrl: './product-carousel.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductCarouselComponent {
readonly images = input<string[]>([]);
readonly discount = input<number | null>(null);
readonly activeIndex = signal(0);
nextImage(): void {
const total = this.images().length;
if (total > 0) {
this.activeIndex.set((this.activeIndex() + 1) % total);
}
}
prevImage(): void {
const total = this.images().length;
if (total > 0) {
this.activeIndex.set((this.activeIndex() - 1 + total) % total);
}
}
selectImage(index: number): void {
const total = this.images().length;
if (index >= 0 && index < total) {
this.activeIndex.set(index);
}
}
}

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

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

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

@@ -1,17 +0,0 @@
.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;
}

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

@@ -1,12 +0,0 @@
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 {}

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

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

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

@@ -1,34 +0,0 @@
.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;
}

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

@@ -1,11 +0,0 @@
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 {}

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

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

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

@@ -1,15 +0,0 @@
.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;
}

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

@@ -1,105 +0,0 @@
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();
}
}
}

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

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

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

@@ -1,118 +0,0 @@
: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;
}

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

@@ -1,27 +0,0 @@
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;
}

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

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

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

@@ -1,37 +0,0 @@
.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;
}

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

@@ -1,14 +0,0 @@
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 };
}

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

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

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

@@ -1,73 +0,0 @@
.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;
}
}

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

@@ -1,62 +0,0 @@
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);
}
}

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

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

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

@@ -1,13 +0,0 @@
.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;
}

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

@@ -1,11 +0,0 @@
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 {}

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

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

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

@@ -1,51 +0,0 @@
.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;
}

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

@@ -1,95 +0,0 @@
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,
}));
}
}

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

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

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

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

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

@@ -1,11 +0,0 @@
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 {}

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

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

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

@@ -1,25 +0,0 @@
.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;
}
}

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

@@ -1,47 +0,0 @@
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();
}
}

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

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

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

@@ -1,24 +0,0 @@
.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;
}
}

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

@@ -1,306 +0,0 @@
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);
}
}
}

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

@@ -1,23 +0,0 @@
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>;
}>;

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

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

Some files were not shown because too many files have changed in this diff Show More