refactor: migrate Critical Components: Payment.js#7004
Draft
talissoncosta wants to merge 4 commits intomainfrom
Draft
refactor: migrate Critical Components: Payment.js#7004talissoncosta wants to merge 4 commits intomainfrom
talissoncosta wants to merge 4 commits intomainfrom
Conversation
…ents Split the monolithic Payment.js into smaller focused modules: - types.ts: Chargebee SDK global types and shared PricingFeature type - constants.ts: URLs, support email, icon colours - pricingFeatures.tsx: startup and enterprise feature lists - PricingFeaturesList.tsx: feature list rendering - PricingToggle.tsx: annual/monthly toggle - PricingPanel.tsx: pricing card with plan details and CTA All components are pure presentational — they receive data via props and contain no business logic or store dependencies. Ref: #6319 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Decouple business logic from UI to enable independent testing: - usePaymentState: organisation data, plan detection, AWS check, billing toggle - useChargebeeCheckout: Chargebee SDK checkout flow and hosted page URL Hooks currently wrap Flux stores (AccountStore, AppActions) — these will be swapped to RTK Query in a follow-up PR without touching the components or hook API. Ref: #6319 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Wire up the main Payment component and PaymentButton to use the extracted hooks (usePaymentState, useChargebeeCheckout) instead of directly accessing Flux stores. Add index.tsx barrel export with Chargebee async script loader wrapper. Ref: #6319 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Toggle between legacy Payment.js and the new modular payment/ components in BillingTab using the rtk_payment feature flag. When the flag is off, behaviour is unchanged. Old Payment.js is preserved untouched for safe rollback. Ref: #6319 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
added
the
front-end
talissoncosta
changed the title
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
1 participant
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.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #6319
Migrate
Payment.jsfrom a monolithic class component to modular functional components with TypeScript, behind a feature flag (rtk_payment).PricingPanel,PricingToggle,PricingFeaturesList,PaymentButtonusePaymentState,useChargebeeCheckoutChargebeeSDK globals,PricingFeature), constants, and pricing configPayment.jspreserved untouched — feature flag toggles atBillingTablevelFollow-up PRs
How did you test this code?
🤖 Generated with Claude Code