feat(pay-card): add a Card interaction screen to the devtool - #21444
feat(pay-card): add a Card interaction screen to the devtool#21444philipptpunkt wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
The new RTK Query hook usage in usePayCardToolProps needs corresponding store/test setup updates (cardApi reducer + middleware) to avoid RTK Query missing-registration errors.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR extends the Pay Card devtool with a native “Card interaction” sub-screen that can run Card Management endpoints on demand and display the latest response/error, starting with a Card Status probe. It also exposes the RTK Query lazy hook needed to trigger the fetch from a button rather than on mount.
Changes:
- Add
interaction.probesto thePayCardToolPropscontract and wire a first “Card Status” probe from the bindings layer. - Add a native-only Interaction UI and an entry row (“Card interaction”) that swaps the tool body into the probe view.
- Export
useLazyGetCardStatusQueryfrom@domain/api-card-managementand add the necessary workspace dependency wiring + changeset.
File summaries
| File | Description |
|---|---|
| pnpm-lock.yaml | Lockfile update for adding @domain/api-card-management to devtools bindings. |
| domain/api/card-management/src/api.ts | Export useLazyGetCardStatusQuery for on-demand Card Status fetching. |
| devtools/pay-card/src/usePayCardViewModel.test.ts | Update test props factory to include interaction. |
| devtools/pay-card/src/usePayCardViewModel.native.test.ts | Update test props factory to include interaction. |
| devtools/pay-card/src/types.ts | Add probe/interaction types and extend the tool props contract. |
| devtools/pay-card/src/pay-card/PayCard.web.test.tsx | Update web test props to include interaction. |
| devtools/pay-card/src/pay-card/PayCard.native.tsx | Add “Card interaction” entry row and swap-to-subscreen behavior. |
| devtools/pay-card/src/pay-card/PayCard.native.test.tsx | Add coverage for opening the interaction screen, running probes, and rendering results. |
| devtools/pay-card/src/components/Interaction/Interaction.web.tsx | Web stub (native-only behavior for now). |
| devtools/pay-card/src/components/Interaction/Interaction.native.tsx | Native Interaction screen rendering probes, results, and errors. |
| devtools/bindings/src/usePayCardToolProps.ts | Build the Card Status probe using useLazyGetCardStatusQuery and expose it via interaction. |
| devtools/bindings/package.json | Add dependency on @domain/api-card-management. |
| .changeset/pay-card-devtools-card-interaction.md | Changeset for devtools + API hook export. |
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
- Files reviewed: 12/13 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const [runCardStatus, cardStatus] = useLazyGetCardStatusQuery(); | ||
|
|
||
| const cardStatusProbe = useMemo<PayCardProbe>( | ||
| () => ({ | ||
| id: "card-status", | ||
| label: "Card Status", |
Web Tools Build Status
|
Rsdoctor Bundle Diff AnalysisFound 7 projects in monorepo, 7 projects with changes. 📊 Quick Summary
📋 Detailed Reports (Click to expand)📁 desktop-mainPath:
📁 desktop-preloaderPath:
📁 desktop-rendererPath:
📁 desktop-webviewDappPreloaderPath:
📁 desktop-webviewPreloaderPath:
📁 desktop-workersPath:
📁 mobilePath:
Generated by Rsdoctor GitHub Action |
f94314a to
adb5ec1
Compare
adb5ec1 to
3334db0
Compare
There was a problem hiding this comment.
🟢 Approval recommended
Changes are scoped to devtool UI + bindings, include a changeset, and add/adjust tests for the new interaction flow.
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
- Files reviewed: 12/13 changed files
- Comments generated: 0 new
- Review effort level: Lite
There was a problem hiding this comment.
🟡 Changes recommended
A new exported hook (useLazyGetCardStatusQuery) is not covered by the existing API export assertions, so a regression could slip through without tests catching it.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
- Files reviewed: 12/13 changed files
- Comments generated: 1
- Review effort level: Lite
| useGetUserQuery, | ||
| useOrderCardMutation, | ||
| useGetCardStatusQuery, | ||
| useLazyGetCardStatusQuery, | ||
| useGetInternalWalletsQuery, |
ce1f477 to
9a51816
Compare
3334db0 to
56bb53b
Compare
9a51816 to
79b3b58
Compare
56bb53b to
a7e9e5b
Compare
There was a problem hiding this comment.
🟡 Changes recommended
The native devtool shows a “Balance” row with a chevron but no navigation/handler, creating a misleading non-functional UI element.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
- Files reviewed: 12/13 changed files
- Comments generated: 1
- Review effort level: Lite
| <ListItem> | ||
| <ListItemLeading lx={{ paddingHorizontal: "s16" }}> | ||
| <Spot appearance="icon" icon={CoinsCrypto} /> | ||
| <ListItemContent> | ||
| <ListItemTitle>Balance</ListItemTitle> | ||
| </ListItemContent> | ||
| </ListItemLeading> | ||
| <ListItemTrailing lx={{ paddingHorizontal: "s16" }}> | ||
| <ChevronRight /> | ||
| </ListItemTrailing> | ||
| </ListItem> |
79b3b58 to
c6be950
Compare
a7e9e5b to
dac8f4e
Compare
There was a problem hiding this comment.
🟡 Changes recommended
It currently exposes sensitive cardholder data in the devtool probe output and includes a misleading non-functional “Balance” navigation row on native.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
Suppressed comments (1)
devtools/pay-card/src/pay-card/PayCard.native.tsx:64
- The "Balance" row renders a navigation chevron but is not pressable (no onPress), which is misleading and can look like a broken link in the devtool UI. Either wire an action or mark the row as disabled and remove the chevron until it’s implemented.
<ListItem>
<ListItemLeading lx={{ paddingHorizontal: "s16" }}>
<Spot appearance="icon" icon={CoinsCrypto} />
<ListItemContent>
<ListItemTitle>Balance</ListItemTitle>
</ListItemContent>
</ListItemLeading>
<ListItemTrailing lx={{ paddingHorizontal: "s16" }}>
<ChevronRight />
</ListItemTrailing>
</ListItem>
- Files reviewed: 12/13 changed files
- Comments generated: 1
- Review effort level: Lite
| label: "Card Status", | ||
| isFetching: cardStatus.isFetching, | ||
| result: cardStatus.data === undefined ? undefined : JSON.stringify(cardStatus.data, null, 2), | ||
| error: cardStatus.error === undefined ? undefined : describeError(cardStatus.error), | ||
| run: () => { |
The Card endpoints have no UI yet, so nothing shows whether they return what we expect. The devtool can call them once the cardholder is signed in and print the response. - "Card interaction" opens over the tool's own body and lists one entry per endpoint, with the last response or error underneath. Sub-views live in the tool: the shell's navigator only knows categories, tools and tool. - The first entry is the card status. Adding an endpoint is one probe in the binding, which keeps the tool component free of app state as before. - Export `useLazyGetCardStatusQuery`: a probe fetches on press, not on mount.
c6be950 to
65ff32b
Compare
dac8f4e to
07964e6
Compare
|
Stack (managed by stac-man)
The Card endpoints have no UI yet, so nothing shows whether they return what
we expect. The devtool can call them once the cardholder is signed in and print
the response.
endpoint, with the last response or error underneath. Sub-views live in the
tool: the shell's navigator only knows categories, tools and tool.
binding, which keeps the tool component free of app state as before.
useLazyGetCardStatusQuery: a probe fetches on press, not on mount.