99560202c3
- cart.component.scss: normalize hardcoded hex colors to design tokens (--text-primary, --text-secondary, --bg-primary/--bg-secondary/ --bg-tertiary, --border-color, --error-color, --success-color, --warning-color, --shadow-*, --transition-*, --radius-* fallbacks) across cart items, quantity controls, summary, login gate, terms checkbox, payment modal, payment-active QR screen, and bank-payment iframe modal - cart.component.scss: deduplicate an accidental duplicate .close-modal-btn rule block (identical CSS repeated twice) - cart.component.scss: add focus-visible rings to clear-cart, remove, quantity, checkout, close-modal, retry-payment, copy/open-link, telegram-login, and card-payment buttons - cart.component.scss: delivery-required warning now pairs an icon with the text instead of relying on color/background alone - cart.component.html: add warning icon + role="alert" to the delivery-required notice; add aria-live/aria-label to the quantity value so screen readers announce quantity changes - delivery-selector.component.scss: normalize hardcoded hex colors to design tokens; remove dead :host-context(.cart-container.alt) rules left over after the .alt theme was removed from cart.component in RC-Visual-02 (cart-container never carries an .alt class anymore); add hover/focus-visible states to the delivery <select> Build verified green via `npm run build`. Out of scope / skipped: - Did not restructure the payment modal or bank-payment iframe overlay into shared app-dialog - it has custom multi-step state (creating/ waiting/success/error/timeout) and an already-implemented manual focus-trap; restructuring it is a composition change, not visual polish - Did not convert clearCart()'s native confirm() to a custom confirm-remove dialog - no existing storefront confirm-dialog pattern to follow, and adding one is a composition/architecture change - spinner-large/spinner-small left untouched per RC-Visual-02 guidance (in-progress action state, not content loading) - .email-form block (email/phone capture after payment success) is dead CSS behind commented-out markup; left in place rather than deleting, since removing it is a code-cleanup call, not visual polish - region-selector/language-selector are header-only, not part of the cart/checkout flow - left untouched - no dedicated checkout page exists; checkout is the payment section of the cart page, covered above Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Marketplace Frontend
Angular marketplace frontend for the client demonstration. The app uses standalone components, signals, runtime branding/configuration, and a production build optimized for the current marketplace experience.
Features
- Responsive marketplace storefront
- Category browsing and product detail pages
- Search and shopping cart flows
- Telegram login integration
- Payment handoff through the existing backend contract
- Runtime branding and configuration loading
- PWA manifest and service worker configuration
Development
Install dependencies:
npm install
Start the local development server:
npm start
Build for production:
npm run build
The production build is written to dist/dexarmarket/.
Project Structure
src/
├── app/
│ ├── components/ # Shared storefront components
│ ├── core/ # Runtime, config, guards, providers, interceptors
│ ├── dynamic-renderer/ # Page, section, and widget rendering pipeline
│ ├── facades/ # Runtime, website, builder, and backoffice facades
│ ├── pages/ # Storefront, info, legal, cart, search, and item pages
│ ├── services/ # API, cart, auth, SEO, Telegram, and language services
│ └── widgets/ # Dynamic renderer widgets
├── assets/mock/ # Local mock configuration and catalog data
├── environments/ # Development and production environment settings
└── styles/ # Shared global styles and themes
Useful Checks
npm run build
npm run arch:check
Notes
- Authentication and payment integrations are intentionally left on their existing contracts.
- Renderer and runtime architecture should remain stable during demo preparation.
- Client-facing content should avoid placeholder names, mock labels, and temporary routes.