Implement Sale Badge Feature for Product Cards

[sennap]

Change Requirements

Add a sale badge feature to product cards that displays a "SALE" indicator when items are marked as discounted. The badge should be positioned in the top-left corner of product cards and styled with a red background to clearly indicate sale items to users.

Code Analysis

Current Implementation

Based on the architecture documentation:

• Frontend implementations exist across three platforms:
  • Web Application (Primary customer-facing interface)
  • Hybrid App (Blazor-based)
  • Client App (MAUI-based native mobile)
• Catalog Service manages product catalog and details
• Architecture follows .NET Aspire services-based pattern

Impact Analysis

Files requiring modification:

• Catalog Service:
  • Model updates for discounted flag
  • API endpoint changes to include discount information
• Frontend Components:
  • Web components for product cards
  • Hybrid App Blazor components
  • MAUI Client App product views
• Test Updates:
  • Catalog functional tests
  • E2E tests for sale badge visibility
  • Component unit tests

Implementation Plan

1. Catalog Service Updates

   • Add IsDiscounted property to product model
   • Update database schema if needed
   • Modify API responses to include discount status
   • Update sample data generation

2. Frontend Implementation

   • Create shared CSS/styling for sale badge
   • Implement badge component for web interface
   • Add corresponding Blazor component for hybrid app
   • Update MAUI views for native display
   • Ensure consistent styling across platforms

3. Testing Strategy

   • Update product model unit tests
   • Add E2E tests for sale badge visibility
   • Test responsive display across devices
   • Verify badge accessibility

4. Integration

   • Ensure proper data flow from Catalog service
   • Validate consistent display across all platforms
   • Performance testing with large product sets

Considerations and Trade-offs

• Cross-Platform Consistency:

  • Ensure consistent badge appearance across web, hybrid, and native
  • Handle different screen sizes and densities

• Accessibility:

  • Badge must be properly announced by screen readers
  • Maintain color contrast requirements
  • Follow WCAG guidelines

• Performance:

  • Minimize impact on product list rendering
  • Optimize badge asset delivery
  • Consider caching strategies

• Maintainability:

  • Use shared components where possible
  • Consistent implementation across platforms
  • Follow existing architectural patterns

Next Steps

1. Create feature branch for implementation
2. Update Catalog.API model and endpoints
3. Implement shared UI components
4. Add test coverage
5. Update documentation