Chore(inertia): Migrate Subscription Manager Page to Inertia #3242
Conversation
…iption-management
There was a problem hiding this comment.
Deleted cancelSubscriptionByUser function because cancellation is now handled via Inertia form submission with server redirect
| const SubscriptionManager = ({ | ||
| product, | ||
| subscription, | ||
| recaptcha_key, | ||
| paypal_client_id, | ||
| contact_info, | ||
| countries, | ||
| us_states, | ||
| ca_provinces, | ||
| used_card, |
There was a problem hiding this comment.
Props now accessed via usePage().props instead of function parameters
| ca_provinces, | ||
| used_card, | ||
| } = cast<Props>(usePage().props); | ||
|
|
There was a problem hiding this comment.
Props now accessed via usePage().props instead of function parameters
There was a problem hiding this comment.
File change summary:
• Converted from ReactOnRails server component to Inertia page component
• Now uses usePage hook to get props instead of function parameters
• Replaced custom cancelSubscriptionByUser with Inertia useForm for cancellation
• Replaced window.location.href navigation with router.visit and router.reload
| @@ -1,4 +0,0 @@ | |||
| <%= render("shared/recaptcha_script") %> | |||
There was a problem hiding this comment.
The reCAPTCHA script is now loaded dynamically via the useRecaptcha hook in React.
The PaymentForm component (which is used in the Manage page) calls:
// app/javascript/components/Checkout/PaymentForm.tsx:60
import { useRecaptcha } from "$app/components/useRecaptcha";
// line 1114
const recaptcha = useRecaptcha({ siteKey: state.recaptchaKey });The hook (app/javascript/components/useRecaptcha.tsx) dynamically loads the script when needed:
const loadRecaptchaScript = (): Promise<void> => {
// Skip if already loaded
if ("grecaptcha" in window) {
return Promise.resolve();
}
// Dynamically inject script tag
const script = document.createElement("script");
script.src = "https://www.google.com/recaptcha/enterprise.js?render=explicit";
script.async = true;
document.head.appendChild(script);
// ...
};
|
|
||
| import { confirmLineItem } from "$app/data/purchase"; | ||
| import { cancelSubscriptionByUser, updateSubscription } from "$app/data/subscription"; | ||
| import { updateSubscription } from "$app/data/subscription"; |
There was a problem hiding this comment.
- updateSubscription is kept as it is because payment flows require client-side 3D Secure handling via Stripe.js. When the server returns requires_card_action, we need to call stripe.confirmCardPayment() in the browser before any navigation occurs.
- Inertia's redirect-based model doesn't allow intercepting the response to handle 3D Secure before navigation.
@Pradumn27 let me know if you have any opinion/approach in mind here? cc @EmCousin
|
@Pradumn27 _a addressed your comments from #3084. could you please review again? Thank you! |
2 participants
Issue: #3073
Fixes: #3073
Description
subscriptions#manageaction to render via Inertia instead of ERB templateserver-components/SubscriptionManager.tsxtopages/Subscriptions/Manage.tsxBefore/After
Before:
Screen.Recording.2026-01-24.at.6.21.48.AM.mov
After:
Screen.Recording.2026-01-24.at.6.19.30.AM.mov
Test Results
bundle exec rspec spec/controllers/subscriptions_controller_spec.rb spec/presenters/checkout_presenter_spec.rb spec/requests/subscription/Checklist
AI Disclosure