fix(ui): polish subscription billing settings

[waleedlatif1]

Summary

• clean up the subscription billing section layout and standardize button sizing
• stabilize plan card layout across monthly and annual states
• reset the add credits modal correctly after successful purchases and tighten its modal lifecycle handling

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 26, 2026 6:35am

[cursor]

PR Summary

Low Risk
Low risk UI/state-management changes limited to the subscription settings screen; main risk is minor regressions in the add-credits modal open/close behavior and layout spacing.

Overview
Improves the Add Credits modal lifecycle by centralizing open/close/reset logic, generating a fresh requestId on each open, preventing closing while a purchase is pending, and safely managing the post-success auto-close timeout (cleanup on re-open/unmount).

Polishes subscription settings UI by stabilizing CreditPlanCard header/pricing/button sizing across states and tightening billing-details section spacing (adds consistent gaps, removes extra top borders, and standardizes button heights).

^{Written by Cursor Bugbot for commit 4281eba. Configure here.}

[greptile-apps]

Greptile Summary

This PR polishes the subscription billing settings UI. In credit-balance.tsx, the modal lifecycle is significantly improved: onPurchaseComplete is now invoked immediately upon a successful purchase (rather than waiting for the 1500 ms auto-close), the auto-close timeout is safely cancelled when the user manually dismisses the modal or when the component unmounts, and modal state (amount, validation errors, mutation state) is properly reset on both open and close. In subscription.tsx, plan card layout is stabilised with min-h constraints and whitespace-nowrap on the pricing section, and the billing details section is refactored from individual border-t pt-[16px] separators to a unified gap-[16px] container.\n\nKey changes:\n- onPurchaseComplete?.() fires immediately on onSuccess, not inside the delayed timeout\n- closeModal() always clears the pending auto-close timeout and resets all mutation/form state\n- handleOpenChange blocks close while purchaseCredits.isPending, preventing a stale-request state\n- Plan card header and action footer have stable min-heights across monthly/annual toggle\n- Billing section dividers replaced with flex-gap for uniform whitespace

Confidence Score: 5/5

Safe to merge — the modal lifecycle fix is correct and the layout changes are purely cosmetic improvements.

Prior review concerns (onPurchaseComplete skipping, redundant rounded corner) have been addressed. The new timeout management is correct: onPurchaseComplete fires immediately, the timeout is cleared on manual close and on unmount, and the pending guard prevents premature dismissal. Layout changes in subscription.tsx are straightforward and carry no functional risk.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx	Refactored modal lifecycle: onPurchaseComplete now fires immediately on success, modal state resets correctly, and the auto-close timeout is safely cleared on unmount or manual close.
apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx	UI layout polish: stable plan card heights via min-h, price section prevented from wrapping, billing details section switched from individual border separators to uniform gap-[16px] spacing.

Sequence Diagram

sequenceDiagram
    participant User
    participant Modal
    participant purchaseCredits
    participant Parent

    User->>Modal: Click "Add Credits" (openModal)
    Note over Modal: resetModalState(), new requestId

    User->>Modal: Enter amount & click Purchase
    Modal->>purchaseCredits: mutate({ amount, requestId })
    purchaseCredits-->>Modal: onSuccess

    Modal->>Parent: onPurchaseComplete?.() (immediate)
    Modal->>Modal: schedule closeModal() in 1500ms

    alt User waits 1500ms
        Modal->>Modal: auto closeModal()
        Note over Modal: clearTimeout, setIsOpen(false), resetModalState()
    else User manually closes modal (ESC / backdrop)
        User->>Modal: onOpenChange(false)
        Note over Modal: isPending=false → closeModal()
        Modal->>Modal: clearTimeout (cancels auto-close), resetModalState()
    end

Loading

_{Reviews (2): Last reviewed commit: "fix(ui): trigger purchase refresh on suc..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR