agama-project / agama / 21132015497

73%

Build Type

push

github

Committed by web-flow

Commit Message

web: product selection page fixes and improvements (#3039)

## Problem

On the product selection screen, the selected product can visually lose
focus when the user interacts with other interactive elements on the
page, such as the top-right header menu. Although the product remains
selected internally, the UI no longer renders the option as selected.

This issue is caused by a combination of re-renders that recreate the
available products collection and the `isChecked` prop comparing entire
product objects instead of stable values (such as product ids). As a
result, object reference changes cause the selection state to appear
lost.

## Solution

While the issue might have been mitigated by usage of memoization
(`useMemo` or `useCallback`) somewhere, this PR addresses the root cause
by comparing products using stable identifiers (`id`) rather than full
object references, making the selection logic more robust and less
error-prone.

During the work on the regression test, it became clear that the
component would benefit from a broader refactor to improve
maintainability and user experience. As a result, this PR goes beyond a
simple hotfix and delivers a more polished version of the product
selection page, including UX and visual improvements, codebase cleanup,
expanded unit test coverage, and preparation for related near-term
features.

## Testing

* Added new unit tests covering the regression and increasing covered
behaviors
* Manually tested the product selection flow either, in initial
selection and changing the product

Run Details

2738 of 5096 branches covered (53.73%)

Branch coverage included in aggregate %.

65 of 65 new or added lines in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

20100 of 26207 relevant lines covered (76.7%)

61.12 hits per line