feat(billing): improve payment page layout

[baktun14]

Summary by CodeRabbit

Release Notes

• UI Improvements
  • Payment form now organized into clear card sections for better navigation.
  • Payment button displays processing state and shows the exact amount you'll pay.
  • Added helpful hints when a payment method isn't selected.
  • Coupon code section now features a dedicated claiming interface.

[coderabbitai]

Walkthrough

The payment form component transitions from plain input elements to a Card-based layout with two distinct sections: an "Add credits" card for payment amount and a "Have a coupon code?" card for coupon application. The payment page heading is conditionally removed when payment methods exist.

Changes

Cohort / File(s)	Summary
Payment Form UI Restructuring apps/deploy-web/src/components/user/payment/PaymentForm.tsx	Replaced plain input group with Card-based layout containing two sections: payment amount input with pay button and coupon input with claim button. Added imports for Card, CardContent, CardDescription, CardHeader, CardTitle. Updated pay button with processing state, enhanced disable logic (checks amount positivity, payment method selection, errors), and conditional hint messaging.
Payment Page Header apps/deploy-web/src/pages/payment.tsx	Removed "Add credits" heading when payment methods are available.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Payment button disable logic requires verification across multiple conditions (amount validation, payment method presence, processing state)
• Card-based restructuring should be visually verified against design specifications
• Coupon section state management with isApplyingCoupon flag warrants attention

Possibly related PRs

• feat(billing): add 3dsecure payments ui #1933: Modifies the same PaymentForm component with overlapping Pay button disable logic changes (parseFloat(amount) <= 0 condition).
• feat(billing): stripe integration #1443: Updates the same PaymentForm component with related payment flow modifications.

Suggested reviewers

• stalniy

Poem

🐰 A card-based form hops into view,
Credits and coupons, all split anew,
The payment flow dances with states so clean,
The prettiest form you've ever seen! 💳✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: improving the payment page layout through Card-based UI restructuring and refinement of payment/coupon flows.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch features/improve-payment-page

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4efd4b6 and a20c885.

📒 Files selected for processing (2)

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx (2 hunks)
• apps/deploy-web/src/pages/payment.tsx (0 hunks)

💤 Files with no reviewable changes (1)

• apps/deploy-web/src/pages/payment.tsx

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/general.mdc)

Never use type any or cast to type any. Always define the proper TypeScript types.

Files:

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx

**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/general.mdc)

**/*.{js,ts,tsx}: Never use deprecated methods from libraries.
Don't add unnecessary comments to the code

Files:

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx

🧠 Learnings (6)

📓 Common learnings

Learnt from: baktun14
Repo: akash-network/console PR: 1933
File: apps/deploy-web/src/components/onboarding/steps/PaymentVerificationCard/PaymentVerificationCard.tsx:43-63
Timestamp: 2025-09-18T07:50:31.224Z
Learning: PaymentVerificationCard component is wrapped by Stripe Elements provider in its parent component PaymentMethodStep, so PaymentMethodForm inside PaymentVerificationCard has access to Stripe context without needing its own Elements wrapper.

Learnt from: baktun14
Repo: akash-network/console PR: 1933
File: apps/deploy-web/src/components/onboarding/steps/PaymentVerificationCard/PaymentVerificationCard.tsx:43-63
Timestamp: 2025-09-18T07:50:31.224Z
Learning: PaymentVerificationCard component is wrapped by Stripe Elements provider in its parent component PaymentMethodStep, so PaymentMethodForm inside PaymentVerificationCard has access to Stripe context without needing its own Elements wrapper.

📚 Learning: 2025-11-12T16:36:02.519Z

Learnt from: baktun14
Repo: akash-network/console PR: 2203
File: apps/deploy-web/src/components/onboarding/steps/PaymentMethodContainer/PaymentMethodContainer.tsx:161-168
Timestamp: 2025-11-12T16:36:02.519Z
Learning: In apps/deploy-web/src/components/onboarding/steps/PaymentMethodContainer/PaymentMethodContainer.tsx, the organization field captured during payment method setup is internal metadata. Errors from stripe.updateCustomerOrganization should be logged to Sentry but not surfaced to users, and the flow should continue even if the organization update fails, as it's non-critical and not something users can fix.

Applied to files:

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx

📚 Learning: 2025-09-18T07:50:31.224Z

Learnt from: baktun14
Repo: akash-network/console PR: 1933
File: apps/deploy-web/src/components/onboarding/steps/PaymentVerificationCard/PaymentVerificationCard.tsx:43-63
Timestamp: 2025-09-18T07:50:31.224Z
Learning: PaymentVerificationCard component is wrapped by Stripe Elements provider in its parent component PaymentMethodStep, so PaymentMethodForm inside PaymentVerificationCard has access to Stripe context without needing its own Elements wrapper.

Applied to files:

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx

📚 Learning: 2025-06-05T21:07:51.985Z

Learnt from: baktun14
Repo: akash-network/console PR: 1432
File: apps/deploy-web/src/components/deployments/DeploymentAlerts/DeploymentCloseAlert.tsx:38-38
Timestamp: 2025-06-05T21:07:51.985Z
Learning: The ContactPointSelect component in apps/deploy-web/src/components/alerts/ContactPointSelectForm/ContactPointSelect.tsx uses the useFormContext hook internally to connect to React Hook Form, so it doesn't need to be wrapped in a FormField component.

Applied to files:

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx

📚 Learning: 2025-09-18T07:44:29.079Z

Learnt from: baktun14
Repo: akash-network/console PR: 1933
File: apps/deploy-web/src/pages/payment.tsx:92-116
Timestamp: 2025-09-18T07:44:29.079Z
Learning: In the payment system, discount calculation is not applied during payment processing. Instead, when users claim coupons/discounts, the discount amount is applied directly to their account balance. Therefore, the payment flow should charge parseFloat(amount) as entered, not a discounted amount.

Applied to files:

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx

📚 Learning: 2025-07-29T15:14:53.419Z

Learnt from: baktun14
Repo: akash-network/console PR: 1750
File: apps/deploy-web/src/components/onboarding/steps/PaymentVerificationCard/PaymentVerificationCard.tsx:33-37
Timestamp: 2025-07-29T15:14:53.419Z
Learning: CardDescription component renders as a p element, so nested content should use div elements instead of p elements to avoid invalid HTML structure (p > p is not allowed).

Applied to files:

• apps/deploy-web/src/components/user/payment/PaymentForm.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Decide Whether to Validate / should-validate
• GitHub Check: should-validate / should-validate

🔇 Additional comments (3)

apps/deploy-web/src/components/user/payment/PaymentForm.tsx (3)

3-3: LGTM: Clean import additions for Card-based layout.

The new Card component imports are properly structured and support the improved UI layout.

---

31-69: LGTM: Well-structured payment card with comprehensive validation.

The "Add credits" card implementation is solid:

• Proper error handling and display for amount validation
• Comprehensive button disable logic covering all edge cases
• Safe fallback for invalid amounts (parseFloat(amount) || 0)
• Good UX with processing state and hint message when no payment method is selected

---

71-94: Verify: Should coupon claiming be disabled during payment processing?

The coupon button is disabled when processing is true (line 90), which prevents users from claiming coupons while a payment is being processed. Please confirm this is intentional behavior to prevent race conditions or state conflicts. If coupon claiming is independent of payment processing, this might be overly restrictive.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 46.90%. Comparing base (4efd4b6) to head (a20c885).
⚠️ Report is 3 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...oy-web/src/components/user/payment/PaymentForm.tsx	0.00%	8 Missing ⚠️

❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (50.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2214      +/-   ##
==========================================
- Coverage   47.24%   46.90%   -0.35%     
==========================================
  Files        1023     1013      -10     
  Lines       29107    28758     -349     
  Branches     7599     7558      -41     
==========================================
- Hits        13753    13490     -263     
+ Misses      14950    14873      -77     
+ Partials      404      395       -9     

Flag	Coverage Δ		*Carryforward flag
api	81.99% <ø> (ø)		Carriedforward from 4efd4b6
deploy-web	25.98% <0.00%> (ø)
log-collector	?
notifications	87.94% <ø> (ø)		Carriedforward from 4efd4b6
provider-console	81.48% <ø> (ø)		Carriedforward from 4efd4b6
provider-proxy	84.96% <ø> (ø)		Carriedforward from 4efd4b6

*This pull request uses carry forward flags. Click here to find out more.

Files with missing lines	Coverage Δ
apps/deploy-web/src/pages/payment.tsx	0.00% <ø> (ø)
...oy-web/src/components/user/payment/PaymentForm.tsx	0.00% <0.00%> (ø)

... and 10 files with indirect coverage changes

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.