10 -- Fix Plan: Component Logic¶
Date: 2026-02-27 (updated) Scope: LoanBoxes, Calculators, Testimonials, News, and Grid Layout component logic
Current Status: ALL CRITICAL AND HIGH ITEMS DONE¶
| Component | Status | Commits |
|---|---|---|
| Calculators | DONE (P2 slider UI remains) | ff6173c (API + stubs + service fields), localization pass |
| LoanBoxes | DONE (P2 performance remains) | 30706dd (dispatcher + 4 modes + MediaPicker fix) |
| Testimonials | DONE | 599d7f8 (slider layout, image suppression, read-more, default mode) |
| News | DONE | 599d7f8 (culture/visibility filters, property casing) |
| Grid Layouts | DONE -- no changes needed | Whitelist confirmed complete via grid-audit-dev |
Fix 1: Calculators -- DONE¶
| Item | Status | Detail |
|---|---|---|
| 1.1 API Controller | DONE | v17 API controller created; all JS endpoints updated |
| 1.2 calculatorIcon | DONE | Fully implemented (284 lines), no longer a stub |
| 1.3 calculatorInputVarRate | DONE | Fully implemented (257 lines) with variable rate logic |
| 1.4 calculatorLarge slider | PARTIAL | Number inputs in place with hidden fields and data attributes. jQuery UI slider replacement deferred (P2). |
| 1.5 Localization | DONE | All 6 calculator partials use IDictionaryService for i18n |
| 1.6 Service fields | DONE | loanStepIncrement, termStepIncrement, etc. added to ICalculatorService |
Remaining P2 item: The calculatorLarge slider UI uses plain number inputs instead of range sliders. The hidden fields and data attributes are in place for a future slider implementation (HTML5 range input or lightweight library).
Fix 2: LoanBoxes -- DONE¶
| Item | Status | Detail |
|---|---|---|
| 2.1 Dispatcher logic | DONE | Routes based on display dropdown value |
| 2.2 Boxes mode | DONE | Fancybox/Bootstrap modal popup UI |
| 2.3 FlipCards mode | DONE | CSS 3D flip animation |
| 2.4 Accordion mode | DONE | Bootstrap collapse panels |
| 2.5 Icon MediaPicker type | DONE | Uses MediaWithCrops + .MediaUrl() |
| 2.6 Performance | DEFERRED (P2) | DescendantsOrSelf() still used; no ISiteSettingsService exists |
| 2.7 Dead code cleanup | DONE | Unused variables removed |
All 4 display modes are functional: Tabs, Boxes, FlipCards, Accordion.
Remaining P2 item: Site settings lookup uses DescendantsOrSelf() which traverses the content tree on every render. Should be replaced with an ISiteSettingsService injection.
Fix 3: Testimonials -- DONE¶
| Item | Status | Detail |
|---|---|---|
| 3.1 Slider column layout | DONE | Changed from col-lg-4 (3-across grid) to col-md-12 (full-width carousel) |
| 3.2 Image suppression in sliderInner | DONE | Conditional image rendering based on layout mode |
| 3.3 Read-more link | DONE | Link to testimonial detail page restored in slider mode |
| 3.4 Default layout | DONE | Changed from "list" to "slider" to match v8 behavior |
| 3.5 Image CSS classes | No fix needed | img-fluid rounded-circle is correct for Bootstrap 5 |
Fix 4: News -- DONE¶
| Item | Status | Detail |
|---|---|---|
| 4.1 Property alias casing | DONE | Verified against element type definition; casing matches |
| 4.2 Culture filtering | DONE | Added to NewsList.cshtml, topStory.cshtml, topStory5Articles.cshtml |
| 4.3 Visibility filtering | DONE | Added IsVisible() check to topStory.cshtml |
| 4.4 Unused injection | DONE | IImageUrlGenerator removed from 4AcrossNews.cshtml |
Fix 5: Grid Layouts -- DONE (No Changes Needed)¶
The property whitelist in BlockGridExtensions.cs was audited against all 14 v8 grid datatype configurations. All v8 config/style properties are covered by the existing whitelist:
Config properties: class, id, data-aos, data-aos-delay, data-aos-duration, data-aos-offset, data-parallax
Style properties: background-color, background-image, background-position, background-size, background-repeat, color, padding, margin, min-height
No custom v8 properties were found outside this set.
Testing Notes¶
Per-component verification was performed during implementation. Cross-browser and multi-language testing should be performed as part of pre-launch QA:
| Component | Test Focus |
|---|---|
| News | Each news layout variant; article culture filtering; image loading |
| Testimonials | All 3 modes: slider (carousel), sliderInner (no images), list (vertical) |
| Calculators | Form submission; result display; Irish language labels |
| LoanBoxes | All 4 modes: Tabs, Boxes (popup), FlipCards (animation), Accordion (collapse) |
| Grid Layouts | Pages with each grid datatype; HTML attributes/styles rendered correctly |