Makes the balance and the card number visibility independent on the card detail screen, each behind its own eye icon.
Bug: https://hola-tech.sg.larksuite.com/record/QcPprUvObeCaGAcjlsglWM9agjh
Before
- The balance eye only toggled the balance; the card number was always exposed.
After
- The header eye toggles ONLY the card number on the preview (Show/Hide card number).
- The balance eye inside CardBalance self-manages its own visibility (uncontrolled).
- Toggling one never reveals or hides the other.
Files
-
detail-card/[id].tsx: header eye drivesisCardNumberVisibleonly; CardBalance is uncontrolled. -
card-vertical-simple.tsx:isVisibleprop masks the card number when false. -
card-preview.tsx: forwardsisVisible. -
card-balance.test.tsx: adds an uncontrolled/self-managed visibility test.
Testing
- Unit tests: 11/11 passed (card-vertical-simple + card-balance, incl. the new uncontrolled case).
- E2E speedrun on iOS (Xcode sim) and Android (emulator API 35) against an isolated local backend with an ACTIVE card:
- Initial: balance ****** and card number •••• •••• both masked.
- Show card number → only the card number reveals (•••• 1234); balance stays ******.
- Show balance → only the balance reveals (1,000.00); card number unchanged.
- Hide card number → only the card number masks; balance stays revealed.