Feature #10618
openTo test & fix the mobile responsive in all pages(E-commerce)
Added by Ajit A 18 days ago. Updated 16 days ago.
Subtasks
Related issues
Updated by Ajit A 18 days ago
- Due date set to 08/31/2026
- Status changed from New to In Progress
- Estimated time set to 7:00 h
1. 🎁 Loyalty Program & Welcome Modal Dynamic Mapping
Dynamic Earning Methods (SPEND_BASED, PERCENTAGE_BASED, FIXED_PER_TRANSACTION):
Integrated dynamic calculation logic in GardeningClubPopup.tsx driven by loyaltySettings.earningRates.ecommerceRegular.
PERCENTAGE_BASED: Strictly isolates percentage rules using pointsPerDollar rate (10% REWARD RATE) and ignores fixedPoints.
FIXED_PER_TRANSACTION: Displays configured fixed reward points (200 REWARD POINTS).
SPEND_BASED: Calculates points per dollar spent (10 PTS / $1 SPEND RATE).
Nullish Coalescing Fallbacks: Updated loyaltyApi.ts to preserve minimumRedeemPoints: 0 and default pointsToCurrencyRate: 100.
Modal Delay & Asset Resolution: Updated modal trigger timer delay to 20 seconds (20000ms) and resolved welcomebannerbg.png asset import.
2. 🎨 UI & Aesthetics Enhancement
Neutral Input Focus States: Replaced green focus borders/rings with neutral slate styling (border-slate-300 focus:border-slate-400 focus:ring-slate-200) across UserProfile.tsx and GardeningClubPopup.tsx.
Reward Cards Redesign & Typography:
Enhanced 4 reward cards in GardeningClubPopup.tsx with glassmorphic cards (backdrop-blur-md), soft-glow gradient icon containers (bg-gradient-to-tr from-emerald-100 to-emerald-50/60), action pills (bg-gradient-to-r from-[#259800] to-emerald-600), and a matching 4th card right-side badge ($1.50 OFF | INSTANT SAVINGS).
Increased font sizes for card titles (11px / 13px), subtitles (9px / 11px), action badges (8px / 9.5px), and point values (11px / 13px).
Page-Wide Pure White Background:
Updated CSS design tokens --page-bg and --bg-secondary to #ffffff in index.css.
Applied bg-white to the application shell in AllRoutes.tsx and container in Dashboard.tsx so all sections seamlessly blend in pure white from header to footer.
3. ⚡ API Performance Optimization & Deduplication
Product Details Page Deduplication:
Added fetchedRelatedPidRef guard in productdetailsui.tsx to prevent fetchRelatedProducts from re-triggering multiple times on page load.
Optimized RecentlyViewedSection.tsx to utilize cached localStorage product data (id, name, image, price), eliminating 2 to 5 redundant network API calls per page view.
4. 🛠️ Backend Server Log Cleanup & Typescript Fixes
Server Log Cleanup: Removed repetitive console.log lines (process.env.NODE_ENV2 and dbUrl 'db url🔽🔽🔽') from CreationDB and ConnectDB in app.config.js.
Formik Type Safety: Fixed Formik ReactNode rendering errors in UserProfile.tsx by explicitly casting errors.fullName and errors.phone to string.
Updated by Ajit A 17 days ago
1. Mobile Layout & Typography Harmonization (Checkout, Cart, Profile, Order Details)
Checkout Page (Checkout.tsx & CouponComponent.tsx):
Redesigned coupon cards in mobile view for single-row compact layout with inline actions (Show toggle, Apply button).
Compacted Order Summary panel, Gift Wrap / Gift Card / SMS opt-in cards.
Cart Page (cart.tsx & CartItemCard.tsx):
Fixed syntax error in CartItemCard.tsx.
Compacted cart item row layout for mobile view (56px/48px images, inline pricing, red discount badge bg-red-50 text-red-600 border).
Compacted cart header, clear cart action, Saved for Later block, and sticky mobile order summary card.
Profile Page (UserProfile.tsx & LoyaltyProfilePanel.tsx):
Compacted mobile navigation tab bar, profile info card headings, field labels (text-[10px] font-semibold text-slate-400), inputs, and action buttons.
Bidirectional sync between URL parameters (tab and subTab) and active profile tab state to ensure exact deep-linking (?tab=address, ?tab=orders, ?subTab=rewards) and fix blank screen rendering issues on sub-routes.
Order Details (OrderDetailsModal.tsx & OrderDetails.tsx):
Compacted Order Details modal and full order details page for mobile views.
Standardized section headers, status pills, item card badges, customer details, and payment summary typography.
2. Loyalty & Rewards Improvements (LoyaltyCheckoutPanel.tsx & GardeningClubPopup.tsx):
Loyalty Checkout Panel:
Hidden optional description on mobile (hidden sm:block) to save vertical space.
Replaced default blue checkbox with primary green-themed checkbox (#259800).
Compacted points balance/redeem stats grid and inline input row.
Gardening Club Popup & Auth Modal Interactivity:
Added global modal event tracking (appModalOpened & appModalClosed in Login.tsx).
Dynamically hide the floating "Get free rewards" CTA widget whenever the Auth Login/Signup modal or other overlays are open to prevent widget overlap.
3. UI Component Consistency & Product Views (ProductUnifiedCard.tsx, UnifiedCard.tsx, productdetailsui.tsx, categories.tsx, EmptyState.tsx):
Harmonized typography, badges, button styles, and responsiveness across product cards, category lists, product detail views, and empty state fallbacks.
Let's prepare a clean, professional markdown summary formatted specifically for a Redmine issue comment / task update!Here is a structured, professional summary of your changes ready to post as a Redmine Issue Comment / Update:
📝 Redmine Progress Update & Commit Summary
📌 Task Summary
Harmonized mobile typography, layout responsiveness, and modal behavior across Checkout, Cart, Profile, Order Details, and Loyalty/Rewards features.
🚀 Key Changes & Accomplishments
1. Mobile Layout & Typography Harmonization
Checkout Page (Checkout.tsx, CouponComponent.tsx):
Redesigned coupon cards in mobile view into a compact single-row layout with inline actions.
Changed coupon toggle button text from "Show Available Coupons" to "Show".
Compacted Order Summary, Gift Wrap, Gift Card, and SMS opt-in cards.
Cart Page (cart.tsx, CartItemCard.tsx):
Fixed syntax error in CartItemCard.tsx.
Compacted product rows on mobile (image thumbnail, inline prices, red discount badge bg-red-50 text-red-600 border).
Harmonized mobile headers, "Clear Cart" button, SavedForLaterBlock, and sticky order summary card.
Profile Page (UserProfile.tsx, LoyaltyProfilePanel.tsx):
Compacted mobile navigation tab bar, profile info card headers, field labels (text-[10px] font-semibold text-slate-400), inputs, and action buttons.
Implemented bidirectional sync between URL parameters (tab and subTab) and active tab state (?tab=address, ?tab=orders, ?subTab=rewards) to ensure deep-linking and eliminate blank-screen rendering edge cases.
Order Details Views (OrderDetailsModal.tsx, OrderDetails.tsx):
Compacted modal header title, section padding, status pills, item line cards, customer details, and payment summary typography for mobile consistency.
2. Loyalty Program & Widget Enhancements
Loyalty Checkout Panel (LoyaltyCheckoutPanel.tsx):
Replaced default blue checkbox with primary green (#259800) toggle checkbox.
Hidden optional description text on mobile view (hidden sm:block) to optimize vertical space.
Compacted points stats grid and inline redemption input row.
Floating Rewards Widget & Auth Modal (GardeningClubPopup.tsx, Login.tsx):
Added global modal lifecycle events (appModalOpened & appModalClosed).
Dynamically hide the floating "Get free rewards" CTA badge whenever the Auth/Login modal or popup drawers are active to prevent UI overlap.
3. UI Components & Product Cards
Product Views (productdetailsui.tsx, ProductUnifiedCard.tsx, UnifiedCard.tsx, categories.tsx, EmptyState.tsx):
Standardized button sizing, badges, typography hierarchy, and empty state fallbacks across product listings and details.
📂 Modified Files (17 files)
src/components/GardeningClubPopup.tsx
src/components/ui/EmptyState.tsx
src/features/auth/pages/Login.tsx
src/features/cart/page/cart.tsx
src/features/cart/page/components/CartItemCard.tsx
src/features/categories/pages/categories.tsx
src/features/checkout/checkout-components/CouponComponent.tsx
src/features/checkout/pages/Checkout.tsx
src/features/loyalty/components/LoyaltyCheckoutPanel.tsx
src/features/loyalty/components/LoyaltyProfilePanel.tsx
src/features/orders/pages/OrderDetails.tsx
src/features/products/components/ProductUnifiedCard.tsx
src/features/products/components/UnifiedCard.tsx
src/features/products/pages/FilteredProducts.tsx
src/features/products/pages/productdetailsui.tsx
src/features/profile/components/OrderDetailsModal.tsx
src/features/profile/components/UserProfile.tsx
Updated by Ajit A 17 days ago
- % Done changed from 60 to 100
Description / Progress Notes:
1. Header & Live Search Dropdown (Header.tsx):
Implemented 2-column live search overlay (SEARCH SUGGESTIONS on left, SEARCH RESULTS on right) with responsive container widths (780px / 900px / 1000px).
Added animated multi-color typing placeholders with promotional offer phrases and crimson OFFER badge pills.
Resolved click-outside listener issue for seamless overlay dismissal.
2. Search Product Cards & Cart Integration (Header.tsx):
Aligned search card aesthetics with the main product card design (rounded-2xl, neutral hover:border-slate-300 border, and smooth lift animation).
Implemented dynamic in-cart state: transforms ADD TO CART into a light gray quantity modifier pill (- QTY +) and a green GO TO CART -> button.
Integrated Loader2 async spinners during quantity changes and fixed target item ID resolution (cartItem._id || pId) to eliminate stuck loading states.
3. Category-to-Product Search Matching (Header.tsx):
Enhanced search type-ahead to query categories (/v1/nus-category/get-all) and retrieve category products (/v1/nus-category/products/category/{catId}), allowing searches by category name (e.g., puji, groceries, plants) to display matching products.
4. Banner Click Navigation (Banners.tsx, PromoStrip.tsx, HomeFeedBanners.tsx, bannerLink.ts):
Fixed banner slide interactivity by removing disabled={!clickable} restrictions.
Implemented /all-products fallback route for unlinked CMS banners.
5. Quick Cart Panel Expansion (QuickCart.tsx):
Expanded Quick Cart drawer width to 540px.
Added "Available Products" cross-sell section with horizontal product cards, ADD buttons, and View All navigation link.