Fix: Add recovery dialogs for missing payment method and verification required#305
Open
sarimrmalik wants to merge 40 commits intomainfrom
Open
Fix: Add recovery dialogs for missing payment method and verification required#305sarimrmalik wants to merge 40 commits intomainfrom
sarimrmalik wants to merge 40 commits intomainfrom
Conversation
- Introduces a new `PaymentMethodsSession` interface to handle payment method sessions. - Updates the `BillingRepository` to include a method for creating payment methods sessions. - Implements a new `MissingPaymentMethodDialog` component to prompt users for payment method input when their team is blocked due to missing payment methods. - Enhances the `TeamBlockageAlert` to open the payment method dialog when appropriate. - Adds utility functions to check for missing payment method blockage reasons. This update improves the user experience by allowing teams to add payment methods directly from the dashboard when blocked.
- Introduces a constant for the loading message in the MissingPaymentMethodDialog component to improve consistency and maintainability. - Updates the LoadingState component to use the new constant for loading payment method messages, enhancing clarity in the user interface.
- Removes the standalone `parsePaymentMethodsSession` function and integrates its logic directly into the `getCustomerSession` method. - Updates the API endpoint for fetching the customer session to align with the new structure. - Enhances error handling for invalid payment methods session responses, ensuring consistent error reporting.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f33b1b3ba6
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
- Introduces a new `capitalize` utility function for consistent string formatting. - Updates `TeamBlockageAlert` to use the new `capitalize` function for displaying blocked reasons, improving readability. - Replaces the deprecated `isMissingPaymentMethodBlockReason` function with a new implementation that utilizes the `capitalize` function. - Removes the unused `team-blockage.ts` file, streamlining the codebase.
…syntax - Changes function declarations to arrow function expressions for `MissingPaymentMethodDialog`, `MissingPaymentMethodDialogContent`, `PaymentMethodsSessionError`, `LoadingState`, `PaymentMethodsSetupElements`, and `PaymentMethodsSetupForm`. - This update enhances consistency in the codebase and aligns with modern React practices.
…remove unused components - Eliminates the `PaymentMethodsSessionError` component and associated error handling logic, simplifying the dialog's structure. - Updates the `PaymentMethodsSetupForm` to remove unnecessary state variables and error messages, enhancing clarity and maintainability. - Integrates toast notifications for error handling, improving user feedback during payment method interactions. - Adjusts the loading state management to ensure a smoother user experience when loading payment elements.
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
…ing-payment-method
- Introduced a new `VerificationPaymentResponse` interface to handle verification payment responses. - Updated `BillingRepository` to include a `createVerificationPayment` method for initiating verification payments. - Implemented the `createVerificationPayment` method in the billing repository, which fetches the verification payment from the API and handles errors appropriately. - Added a new `VerificationRequiredDialog` component to prompt users for verification payments, including loading states and error handling. - Updated the `TeamBlockedIndicator` to open the verification dialog when the team is blocked due to verification requirements. This change enhances the billing process by allowing teams to verify their accounts through a payment mechanism.
…ing-payment-method
…ation messaging - Updated the success toast message in the PaymentMethodsSetupForm to clarify that a payment method was added. - Added a success toast in the VerificationPaymentForm to notify users when their team has been verified and unblocked. - Changed the dialog title and description in the VerificationRequiredDialogContent to reflect that the team requires verification instead of the account.
|
We require contributors to sign our Contributor License Agreement, and we don't have @sarimrmalik on file. You can sign our CLA at https://e2b.dev/docs/cla . Once you've signed, post a comment here that says '@cla-bot check' |
sarimrmalik
changed the title
… consistency - Replaced the native button element with a custom Button component to enhance styling and maintain consistency across the UI. - Updated button properties to align with the new component's API, ensuring proper functionality and visual appearance.
…sions - Integrated PostHog tracking to capture 'payment_method_added' and 'verification_payment_submitted' events in the MissingPaymentMethodDialog and VerificationRequiredDialog. - Updated the dialog components to call the tracking function upon successful payment method addition and team verification, enhancing analytics capabilities for user interactions. - Added optional onSuccess callback to the TeamBlockedRecoveryPaymentElement for improved flexibility in handling success events.
…d state management - Introduced a new type, StripeReturnHandlerState, to manage the state of the Stripe return handler more effectively. - Replaced the previous boolean flag with a state variable to track the handling process, enhancing clarity and control over the payment session flow. - Updated error handling to ensure proper state transitions during payment session creation and Stripe return checks, improving user feedback and reliability.
- Renamed BLOCKED_REASONS to TEAM_BLOCKED_REASONS for clarity and consistency across the codebase. - Updated imports and type definitions in TeamBlockedIndicator and related dialog components to utilize the new TEAM_BLOCKED_REASONS constant. - Introduced a utility function, getBlockedDialogStorageKey, for managing dismissed dialog states in session storage, enhancing user experience by preventing re-prompting of already dismissed dialogs. - Streamlined state management in MissingPaymentMethodDialog and VerificationRequiredDialog to improve clarity and performance.
ben-fornefeld
requested changes
May 6, 2026
Member
ben-fornefeld
left a comment
ben-fornefeld
left a comment
There was a problem hiding this comment.
one more thing — the dismissed-flag ordering is fragile. inline comment.
…rity and functionality - Introduced TeamBlockedIndicatorContent and TeamBlockedDialogController components to separate concerns and enhance readability. - Updated useBlockedMessage to return a structured BlockedMessage type for better type safety. - Replaced direct session storage interactions with a simplified useSessionStorage hook for managing dismissed dialog states. - Streamlined dialog handling logic in TeamBlockedIndicator to improve user experience and maintainability. - Removed the deprecated use-session-storage hook, consolidating session storage management.
- Updated MissingPaymentMethodDialog and VerificationRequiredDialog to use onDismiss callback for handling dialog closure, enhancing clarity in state transitions. - Streamlined dialog open/close logic by consolidating the handling of open state changes, improving maintainability. - Adjusted props in TeamBlockedRecoveryPaymentElement to replace onOpenChange with onClose for consistency across dialog components. - Enhanced user experience by ensuring dialogs properly dismiss and manage state without unnecessary complexity.
Add uppercase and md:prose-label! to the dialog-trigger button so the clickable CTA renders in the same uppercase label style as the rest of the indicator text.
Iterate the known blocked reasons and remove their sessionStorage keys once the team is no longer blocked. Without this, a previously dismissed flag would persist and suppress the auto-open if the team got blocked again with the same reason.
The dialogs already remove the dismissed flag via removeDismissedDialog at the right moment — right when the 'Team unblocked' success toast fires (form-submit path) and on the Stripe URL-return success paths. The useEffect in the indicator was redundant.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
Summary
Test plan
Images