Prevent request to pay being clicked twice

[stefanbitcr]

User description

📝 Description

Checks whether request to pay has been initiated, and only display the request to pay button if not, otherwise display the address.

Closes #55

Requires payment status to be exposed and merged in Wildcat

---

✅ Checklist

Please ensure the following tasks are completed before requesting a review:

• My code adheres to the style guidelines of this project.
• I have run npm run lint or the equivalent linting command.
• I have added or updated tests (if applicable).
• My changes have been tested thoroughly in different browsers/resolutions (if applicable).
• I have updated the documentation (if applicable).
• I have checked that there are no console errors or warnings.
• I have verified that the application builds without errors.
• I have tested responsiveness for mobile and desktop views (if applicable).

---

PR Type

Enhancement

---

Description

• Prevent duplicate request-to-pay clicks by checking payment status

• Display payment address when request has been initiated

• Add payment status API integration and types

• Update UI to conditionally show request button or address

---

Changes diagram

flowchart LR
  A["User clicks request to pay"] --> B["Check payment status"]
  B --> C{Already requested?}
  C -->|No| D["Show request button"]
  C -->|Yes| E["Show payment address"]
  D --> F["Allow payment request"]
  E --> G["Prevent duplicate clicks"]

Loading

---

Changes walkthrough 📝

Relevant files

Enhancement

sdk.gen.ts Add payment status API endpoint                                                    src/generated/client/sdk.gen.ts Add BillPaymentData and BillPaymentState type imports Add paymentStatus API function for checking payment status +16/-1    types.gen.ts Add payment status type definitions                                            src/generated/client/types.gen.ts Add BillWaitingForPaymentState type with payment details Add BillPaymentStatus type with request status flags Add BillPaymentState and BillPaymentData types for API +87/-52  QuotePage.tsx Implement payment status checking and UI updates                  src/pages/quotes/QuotePage.tsx Import paymentStatus API function Add payment status query to fetch current state Add requestedToPay prop to QuoteActions component Conditionally render request button or payment address Display payment address when request has been initiated +34/-4

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 55 - PR Code Verified Compliant requirements: • Prevent user from clicking request to pay button twice • Implement mechanism to track payment request status • Display appropriate UI state based on payment status Requires further human verification: • UI behavior verification - ensure button is properly disabled/hidden after first click • Payment address display formatting and user experience

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Error Handling The payment status query lacks error handling which could cause the UI to break if the API call fails. The conditional logic relies on the query succeeding. const { data: paymentData } = useQuery({ queryKey: ["bill_id", billId], queryFn: () => paymentStatus({ path: { bill_id: billId }, }), }) Query Dependency The payment status query runs unconditionally even when billId is empty, which could result in unnecessary API calls or errors. const { data: paymentData } = useQuery({ queryKey: ["bill_id", billId], queryFn: () => paymentStatus({ path: { bill_id: billId }, }), })

[Copilot]

Pull Request Overview

This PR ensures the “Request to Pay” button only appears once per bill and displays the payment address after a request has been made.

• Introduces the paymentStatus SDK call and fetches requestedToPay/paymentAddress.
• Adds conditional rendering of the pay button and payment address row.
• Propagates requestedToPay into QuoteActions and updates toast IDs.

Comments suppressed due to low confidence (3)

src/pages/quotes/QuotePage.tsx:483

• Update the title/description to refer to “pay” instead of “mint” for consistency with the button text and new feature.

            title="Confirm requesting to mint"

src/pages/quotes/QuotePage.tsx:440

• Include the error message (e.g., + ": " + error.message) to aid debugging when the mutation fails.

            <span>

src/pages/quotes/QuotePage.tsx:744

• Add tests to cover the new behavior: button hidden when requestedToPay is true and payment address displayed.

          {requestedToPay ? (

[Copilot]

Add an enabled: !!billId flag to this query to avoid unnecessary network requests when billId is empty.

[qodo-merge-pro]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	✅ Add query enablement condition Suggestion Impact: The suggestion was directly implemented by adding the `enabled: !!billId` condition to the payment status query code diff: + enabled: !!billId, The payment status query should be disabled when billId is empty to prevent unnecessary API calls. Add an enabled condition to only fetch when a valid bill ID exists. src/pages/quotes/QuotePage.tsx [692-698] const { data: paymentData } = useQuery({ queryKey: ["bill_id", billId], queryFn: () => paymentStatus({ path: { bill_id: billId }, }), + enabled: !!billId, }) [Suggestion processed] Suggestion importance[1-10]: 7 __ Why: This is a good practice that prevents an unnecessary and likely failing API call when billId is empty, aligning with patterns already used in the component.	Medium
Update

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 61 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/pages/quotes/QuotePage.tsx	0.00%	51 Missing ⚠️
src/generated/client/sdk.gen.ts	0.00%	10 Missing ⚠️

📢 Thoughts on this report? Let us know!

[zupzup]

Seems a bit confusing that this button and the confirmation vary between "request to pay" and "request to mint" 🤔

[stefanbitcr]

Yes, I'll adjust for consistency

[cloudflare-workers-and-pages]

Deploying wildcat-dashboard with    Cloudflare Pages

Latest commit:	32307b7
Status:	✅  Deploy successful!
Preview URL:	https://f5b524d9.wildcat-dashboard.pages.dev
Branch Preview URL:	https://stefan-requestpay.wildcat-dashboard.pages.dev

View logs