feat(web): Pension Calculator - After 1 September 2025 preview #16392
Conversation
WalkthroughThe changes in this pull request involve enhancements to the pension calculation functionality and styling in the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (5)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts (2)
12-14: LGTM: New longLine styleThe new
longLinestyle is well-defined and consistent with the existinglinestyle. For improved maintainability, consider using thelineWidthvariable here as well.Consider updating the style definition for consistency:
export const longLine = style({ - borderLeft: `${lineWidth} solid ${theme.color.blue200}`, + borderLeft: `${lineWidth} solid ${theme.color.blue200}`, })
16-28: LGTM: Responsive highlightedItemsContainer styleThe new
highlightedItemsContainerstyle effectively usesthemeUtils.responsiveStylefor a responsive grid layout. This aligns well with NextJS best practices for responsive design.Consider adding intermediate breakpoints (e.g., 'md') for a smoother responsive transition:
export const highlightedItemsContainer = style({ display: 'grid', ...themeUtils.responsiveStyle({ xs: { gridTemplateColumns: '1fr', gap: theme.spacing[4], }, + md: { + gridTemplateColumns: '1fr auto', + gap: theme.spacing[5], + }, lg: { gridTemplateColumns: '1fr auto 1fr', gap: theme.spacing[7], }, }), })apps/web/screens/Organization/SocialInsuranceAdministration/utils.ts (2)
153-155: LGTM with a minor suggestion for clarityThe new
is2025PreviewActivefunction is well-implemented and follows TypeScript best practices. It safely handles the optionalcustomPageDataparameter and ensures a boolean return type.For improved clarity and to make the function's behavior more explicit, consider using a default value:
export const is2025PreviewActive = (customPageData?: CustomPage | null): boolean => { return Boolean(customPageData?.configJson?.show2025Preview ?? false) }This change explicitly returns
falsewhencustomPageDatais null or undefined, making the function's behavior more predictable.
Line range hint
1-155: Overall impact: Enhances pension calculation utilitiesThe addition of the
is2025PreviewActivefunction aligns well with the PR objectives and enhances the utility module for pension calculations. It provides a clean way to toggle the 2025 preview feature, which is crucial for comparing current disability results with projected ones.The implementation is consistent with the existing code style and doesn't introduce any breaking changes. This addition sets the groundwork for implementing the comparative analysis feature requested by the social insurance administration.
To fully realize the PR objectives, ensure that:
- The UI components utilize this new function to conditionally render the 2025 preview.
- Appropriate tests are added to verify the behavior of this new function.
- Documentation is updated to reflect this new feature and its usage.
apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (1)
582-596: LGTM: Clear translations for "After September 1, 2025" feature addedThe new translation strings
after1stSeptember2025,after1stSeptember2025Calculate, andafter1stSeptember2025Descriptionprovide clear and concise text for the new feature to calculate pension in the system after September 1, 2025. They effectively communicate the purpose of this new calculation option to the user.For consistency, consider updating the
after1stSeptember2025Descriptionto match the wording used in theresult2025Disclaimer. Suggest changing:- defaultMessage: 'Sjá útreikning örorkulífeyris í nýju kerfi', + defaultMessage: 'Sjá útreikning lífeyris í nýju kerfi eftir 1. september 2025',This change would align the description more closely with the terminology used in the disclaimer and other parts of the interface.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (4)
- apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts (2 hunks)
- apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (17 hunks)
- apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (3 hunks)
- apps/web/screens/Organization/SocialInsuranceAdministration/utils.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Organization/SocialInsuranceAdministration/utils.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (4)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.css.ts (2)
3-3: LGTM: Improved theme utility importThe addition of
themeUtilsto the import statement is a good practice. It centralizes theme-related utilities and supports the new responsive styling introduced in this file.
Line range hint
1-28: Summary: Enhanced styling for pension calculation comparisonThe changes in this file effectively support the PR objective of introducing a feature for comparing pension calculations. The new styles (
longLineandhighlightedItemsContainer) and the improved use of theme utilities enhance the component's ability to display comparative results responsively.These modifications align well with NextJS best practices, make efficient use of the theme system, and leverage TypeScript for type safety. The responsive design approach supports the goal of providing a clear comparison between current and future pension calculations.
apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (2)
431-437: LGTM: Clear and informative disclaimer addedThe new translation string
result2025Disclaimerprovides a clear and informative disclaimer for the 2025 pension calculator. It effectively communicates that the results are based on user-provided assumptions, are not binding, and shows a comparison between the current year and the new system after September 1, 2025.
453-462: LGTM: Clear labels for result details addedThe new translation strings
resultDetails2024Labelandresult2025DetailsLabelprovide clear and concise labels for the breakdown of pension amounts. They effectively differentiate between the current system (2024) and the future system (after September 1, 2025), which is consistent with the calculator's purpose of comparing the two systems.
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
Show resolved
Hide resolved
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
Show resolved
Hide resolved
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
Show resolved
Hide resolved
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
Outdated
Show resolved
Hide resolved
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (7)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (6)
78-79: LGTM: New props for flexible heading customizationThe addition of
topHeadingTextandtopHeadingLevelprops enhances the flexibility of the HighlightedItems component. This is good for accommodating the 2025 preview feature.Consider using a union type for
topHeadingLevelto restrict it to valid heading levels:topHeadingLevel?: 2 | 3 | 4 | 5 | 6;This would prevent accidental use of invalid heading levels.
85-86: LGTM: Implementation of new heading customization propsThe changes effectively implement the new
topHeadingTextandtopHeadingLevelprops, allowing for dynamic heading customization. This enhances the component's flexibility for different use cases, including the 2025 preview feature.Consider extracting the heading level logic into a separate function to improve readability:
const getHeadingProps = (index: number, topHeadingLevel: number) => { const level = index === 0 ? topHeadingLevel : topHeadingLevel + 1; return { as: `h${level}` as TextProps['as'], variant: `h${level + 1}` as TextProps['variant'], }; }; // Usage const { as: titleAs, variant: titleVariant } = getHeadingProps(index, topHeadingLevel);This would make the component more maintainable and easier to understand.
Also applies to: 117-123, 128-130
Line range hint
274-285: LGTM: Setup for 2025 preview calculationsThe changes effectively set up the necessary state and variables for handling the 2025 preview feature. The use of
is2025PreviewActiveensures that the 2025 preview is only shown when appropriate.Consider extracting the logic for
highlighted2025ItemIsPresentinto a separate function to improve readability:const is2025PreviewHighlighted = ( items: SocialInsurancePensionCalculationResponseItem[], customPageData: CustomPage | null | undefined, calculationInput: SocialInsurancePensionCalculationInput ) => { return ( items.length > 0 && is2025PreviewActive(customPageData) && calculationInput.dateOfCalculations && new Date(calculationInput.dateOfCalculations).getFullYear() >= 2024 ); }; // Usage const highlighted2025ItemIsPresent = is2025PreviewHighlighted( highlightedItems2025, customPageData, calculationInput );This would make the component more maintainable and easier to understand.
Also applies to: 297-306, 314-315
364-370: LGTM: Implementation of 2025 preview UIThe changes effectively implement the UI for the 2025 preview feature, including conditional rendering for the 2025 disclaimer and highlighted items, as well as a toggle for showing disability changes in 2025.
Consider extracting the 2025 preview UI logic into a separate component to reduce the complexity of the main component:
const Preview2025 = ({ highlighted2025ItemIsPresent, calculationInput, highlightedItems2025, showDisabilityChangesIn2025, setShowDisabilityChangesIn2025, customPageData, }) => { // ... implementation ... }; // Usage in main component {highlighted2025ItemIsPresent && ( <Preview2025 highlighted2025ItemIsPresent={highlighted2025ItemIsPresent} calculationInput={calculationInput} highlightedItems2025={highlightedItems2025} showDisabilityChangesIn2025={showDisabilityChangesIn2025} setShowDisabilityChangesIn2025={setShowDisabilityChangesIn2025} customPageData={customPageData} /> )}This would improve the readability and maintainability of the main component.
Also applies to: 385-471
523-536: LGTM: New AccordionItem for 2025 calculation detailsThe addition of a new AccordionItem for 2025 calculation details is appropriate and consistent with the 2025 preview feature implementation.
Consider adding an aria-label to the AccordionItem for better accessibility:
<AccordionItem // ... other props ... aria-label={formatMessage(translationStrings.result2025DetailsAriaLabel)} > // ... content ... </AccordionItem>Don't forget to add the corresponding translation string.
614-616: LGTM: Data fetching for 2025 preview featureThe implementation of conditional data fetching for the 2025 preview feature is appropriate. It ensures that the 2025 data is only retrieved when the preview is active, which is efficient.
Consider extracting the 2025 data fetching logic into a separate function to improve readability:
const fetch2025Data = async (apolloClient, calculationInput, customPageData) => { if (is2025PreviewActive(customPageData)) { return apolloClient.query<Query, QueryGetPensionCalculationArgs>({ query: GET_PENSION_CALCULATION, variables: { input: { ...calculationInput, startYear: 2025, startMonth: 9, }, }, }); } return { data: { getPensionCalculation: { groups: [], highlightedItems: [], }, }, }; }; // Usage in getProps const [ // ... other queries ... { data: { getPensionCalculation: getPensionCalculation2025 } }, ] = await Promise.all([ // ... other queries ... fetch2025Data(apolloClient, calculationInput, customPageData), ]);This would make the
getPropsmethod more readable and easier to maintain.Also applies to: 642-660
apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (1)
Line range hint
431-601: Summary: New translation strings for 2025 pension system comparison feature.The added translation strings effectively support the new feature for comparing disability results before and after September 1, 2025. They provide necessary labels, descriptions, and disclaimers for the updated pension calculator. The changes are well-integrated into the existing structure and follow the established patterns in the file.
Some suggestions for further improvement:
- Consider adding comments to group related translation strings together for better organization.
- Ensure that these new strings are used consistently across the application's components.
- Update the application's documentation to reflect these new translation additions.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (17 hunks)
- apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (12)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (5)
60-60: LGTM: New utility import for 2025 preview featureThe addition of
is2025PreviewActiveimport is appropriate for the new 2025 preview feature.
264-264: LGTM: New prop for 2025 calculation resultsThe addition of the
calculation2025prop is appropriate for handling the 2025 preview calculations. It uses the same type as the existingcalculationprop, maintaining consistency in the data structure.
491-495: LGTM: Conditional label for 2025 previewThe conditional label rendering for the 2025 preview in disability pensions is appropriate and consistent with the overall implementation of the 2025 preview feature.
566-584: LGTM: Consistent props for HighlightedItems in print viewThe addition of new props to the HighlightedItems component in the print view ensures consistency with the screen view, including the 2025 preview features when applicable. This is a good practice for maintaining a coherent user experience across different views.
684-684: LGTM: Passing 2025 calculation data to componentThe addition of the
calculation2025prop to the return object ingetPropsis consistent with the earlier changes and ensures that the 2025 calculation data is correctly passed to the component.apps/web/screens/Organization/SocialInsuranceAdministration/translationStrings.ts (7)
431-437: LGTM: New translation string for 2025 results disclaimer.The
result2025Disclaimertranslation string is well-formatted and provides clear information about the calculator's limitations and the comparison between current and post-September 2025 results.
443-447: LGTM: New translation string for 2025 results heading.The
highlightedResult2025ItemHeadingtranslation string is correctly formatted and provides a clear heading for the total disposable income after tax in the 2025 results section.
458-462: LGTM: New translation string for 2024 results breakdown label.The
resultDetails2024Labeltranslation string is correctly formatted and provides a clear label for the breakdown of amounts for the year 2024.
463-467: LGTM: New translation string for post-September 2025 results breakdown label.The
result2025DetailsLabeltranslation string is correctly formatted and provides a clear label for the breakdown of amounts for the period after September 1, 2025.
587-591: LGTM: New translation string for post-September 2025 label.The
after1stSeptember2025translation string is correctly formatted and provides a clear label for the period after September 1, 2025.
592-596: LGTM: New translation string for calculate button in 2025 system.The
after1stSeptember2025Calculatetranslation string is correctly formatted and provides a clear label for the calculate button in the new pension system after September 1, 2025.
597-601: LGTM: New translation string for 2025 system description.The
after1stSeptember2025Descriptiontranslation string is correctly formatted and provides a clear description for viewing the disability pension calculation in the new system after September 1, 2025.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #16392 +/- ##
==========================================
- Coverage 36.75% 36.73% -0.02%
==========================================
Files 6808 6808
Lines 140993 141065 +72
Branches 40157 40213 +56
==========================================
+ Hits 51817 51825 +8
- Misses 89176 89240 +64
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 11 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 2 Total Test Services: 0 Failed, 2 Passed Test Services
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (3)
78-79: LGTM: Enhanced flexibility for HighlightedItems componentThe addition of
topHeadingTextandtopHeadingLevelprops improves the component's flexibility, allowing it to handle both current and 2025 preview data. This change aligns well with the PR objectives.Consider using a type union for
topHeadingLevelinstead of a more permissive type:topHeadingLevel?: 2 | 3This would provide stronger type checking and better reflect the intended usage.
Also applies to: 85-86, 117-123, 128-130
285-286: LGTM: Implemented 2025 preview logicThe addition of the
showDisabilityChangesIn2025state variable and the conditional logic forhighlighted2025ItemIsPresenteffectively implement the 2025 preview feature. These changes align well with the PR objectives.Consider extracting the complex condition for
highlighted2025ItemIsPresentinto a separate function for improved readability:const isHighlighted2025ItemPresent = () => { return ( highlightedItems2025.length > 0 && is2025PreviewActive(customPageData) && calculationInput.dateOfCalculations && new Date(calculationInput.dateOfCalculations).getFullYear() >= 2024 ); };Then use it as:
const highlighted2025ItemIsPresent = isHighlighted2025ItemPresent();Also applies to: 297-306, 314-316
382-469: LGTM: Implemented UI for 2025 preview featureThe changes to the rendering logic effectively implement the UI for the 2025 preview feature. The conditional rendering and new UI elements provide appropriate control and visibility of the 2025 data, aligning well with the PR objectives.
Consider extracting the repeated condition
calculationInput.typeOfBasePension === SocialInsurancePensionCalculationBasePensionType.Disabilityinto a constant for improved readability:const isDisabilityPension = calculationInput.typeOfBasePension === SocialInsurancePensionCalculationBasePensionType.Disability;Then use this constant in the conditional rendering logic.
Also applies to: 484-534
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (17 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (4)
apps/web/screens/Organization/SocialInsuranceAdministration/PensionCalculatorResults.tsx (4)
33-33: LGTM: New imports support 2025 preview functionalityThe addition of
SocialInsurancePensionCalculationBasePensionTypeandis2025PreviewActiveimports are appropriate for implementing the new 2025 preview feature. These changes align well with the PR objectives.Also applies to: 60-60
264-264: LGTM: Added 2025 calculation propThe addition of the
calculation2025prop to thePensionCalculatorResultsPropsinterface is appropriate for implementing the 2025 preview feature. This change is consistent with the existing structure and aligns with the PR objectives.
Line range hint
612-658: LGTM: Efficient data fetching for 2025 previewThe changes to the
getPropsmethod effectively implement conditional fetching of 2025 preview data. The use ofis2025PreviewActiveensures that this feature can be easily toggled, and the data is only fetched when necessary. This approach is efficient and aligns well with the PR objectives.
682-682: LGTM: Added 2025 calculation to return valueThe addition of
calculation2025to the return object ofgetPropsis appropriate and consistent with how the current calculation data is handled. This change ensures that the 2025 preview data is correctly passed to the component.
Pension Calculator - After 1 September 2025 preview
What
Why
Screenshots / Gifs
Before
Screen.Recording.2024-10-14.at.16.48.41.mov
Screen.Recording.2024-10-14.at.16.51.37.mov
After
If the user selects "Örorkulífeyrir" then he'll see the comparison screen
Screen.Recording.2024-10-14.at.16.49.47.mov
Other selectionthan "Örorkulífeyrir" are still looking the same visually
Screen.Recording.2024-10-14.at.16.53.38.mov
Demonstration if config is set to false (then we've got the same old look)
Screen.Recording.2024-10-14.at.17.03.16.mov
Responsiveness (before and after)
Screen.Recording.2024-10-14.at.17.13.10.mov
Checklist:
Summary by CodeRabbit
New Features
Bug Fixes
HighlightedItemscomponent.Documentation