Bug #11224
opento fix the Product page filters and UI enhancements
Added by Ajit A 4 days ago. Updated 4 days ago.
Subtasks
Related issues
Updated by Ajit A 4 days ago
- Status changed from In Progress to Resolved
- % Done changed from 0 to 100
1. Technical Review & Regression Analysis
Flow & Functionality Verification
Checkout & Order Flow: Preserved all payment methods (Stripe, PhonePe/UPI, Wallet), form validations, and guest OTP authentication. Radio button refactors use sr-only native inputs, maintaining 100% standard form and accessibility behavior with custom visual styling.
Profile & Address Management: Preserved all mutation hooks (useUpdateProfileMutation, useAddAddressMutation, useUpdateAddressMutation, useDeleteAddressMutation). State management and form payloads remain identical.
Product Catalog & Dynamic Facets: Backend dynamic facets and price ranges are returned alongside pagination without altering existing response keys.
Responsive Layout & Spacing: Top container padding refactor across dashboard pages (Orders, Order Details, Profile, Wishlist) coordinates with <Breadcrumb /> to prevent double-offsetting on desktop while ensuring sufficient header clearance on mobile.
2. Redmine Task Summary
A. Backend Repository (Noxa-Jewellery-be)
Key Modifications & New Features:
Dynamic Product Facets & Price Aggregation (products.service.ts):
Implemented MongoDB $facet aggregation to dynamically compute active product counts for categories and subcategories based on current search and stock filters.
Added dynamic $min and $max price aggregation (with multi-currency conversion support) for live product catalog filtering.
Pre-Order Status Notification (orders.service.ts, email.service.ts):
Added automated email trigger when a preorder item transition to Ready to Ship / ready_to_ship status, notifying the customer with remaining balance breakdown and payment details.
Query Builder Enhancement (query-builder.service.ts):
Added applyCommonFilters configuration to allow facet queries to exclude specific filter dimensions cleanly.
B. E-Commerce Frontend Repository (Noxa_E_Comm_Fe)
Key Modifications & New Features:
Profile Dashboard Redesign (ProfileContent.tsx):
Upgraded container to max-w-7xl aligned with Orders page standards.
Standardized header hierarchy with gold badge ACCOUNT DASHBOARD, serif title My Profile, and Edit Profile CTA.
Built a Member Hero Card with dynamic initials avatar, NOXA MEMBER + VERIFIED ACCOUNT badges, and quick stats (addresses count & wallet balance).
Re-engineered two-column layout for Personal Details and Saved Addresses with custom item icons (User, Mail, Phone, MapPin), phone tags, and luxury empty-state placeholders.
Layout & Breadcrumb Spacing Normalization (OrdersContent.tsx, OrderDetailsContent.tsx, WishlistContent.tsx, ProfileContent.tsx, app/cart/page.tsx, app/checkout/page.tsx):
Removed oversized pt-40/pt-44 container paddings, introducing responsive pt-20 sm:pt-4 md:pt-6 beneath <Breadcrumb /> to eliminate large empty gaps.
Dynamic Product Filtering & Price Ranges (ProductsListing.tsx, useProducts.ts, productService.ts):
Connected catalog filters to dynamic facets for real-time category counts and auto-disabling empty filters.
Generated 3-tier dynamic price quick-filter pills (Under ₹X, ₹X - ₹Y, Above ₹Y) and dual price range slider.
Checkout Brand Theme & Custom Radios (CheckoutContent.tsx, UpiPaymentPanel.tsx):
Replaced browser-default radio inputs with custom dual-ring gold/primary indicators across Shipping, Payment, and Billing sections.
Replaced hardcoded purple/amber styling with dynamic --primary tokens.
Footer Social Icons Glow Effect (Footer.tsx):
Applied company primary theme color by default with an interactive luminous glow and scaling effect on hover.
Home Promo Banner Responsive Refinement (HomePromoSection.tsx):
Adjusted banner to medium compact proportions and ensured full responsiveness across mobile, tablet, and desktop.