From 3b8b539efc954bf2be496050b52da5e44bc7f251 Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Tue, 25 Nov 2025 17:09:41 +0000 Subject: [PATCH] Feature/v2/stripeorsupabaseNotEnabled (#5006) Removed current plan section from static plan to match connected version stripe publishable key not required to show plans or checkout in hosted version lazy load plans when needed not on load --- .../public/locales/en-GB/translation.json | 1 + .../configSections/AdminPlanSection.tsx | 6 +-- .../configSections/plan/StaticPlanSection.tsx | 40 -------------- .../shared/stripeCheckout/StripeCheckout.tsx | 26 ++-------- .../stripeCheckout/stages/PaymentStage.tsx | 11 ++-- .../proprietary/contexts/CheckoutContext.tsx | 52 ++++++++++++++++--- .../proprietary/utils/protocolDetection.ts | 24 +++++++-- 7 files changed, 81 insertions(+), 79 deletions(-) diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index da2ee3623..dea5ff141 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -5569,6 +5569,7 @@ }, "payment": { "preparing": "Preparing your checkout...", + "redirecting": "Redirecting to secure checkout...", "upgradeTitle": "Upgrade to {{planName}}", "success": "Payment Successful!", "successMessage": "Your subscription has been activated successfully. You will receive a confirmation email shortly.", diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx index 52e20a6d0..c5d1ff658 100644 --- a/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx +++ b/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx @@ -31,9 +31,9 @@ const AdminPlanSection: React.FC = () => { // Check if we should use static version useEffect(() => { - // Check if Stripe is configured - const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY; - if (!stripeKey || !isSupabaseConfigured || error) { + // Only use static version if Supabase is not configured or there's an error + // Stripe key is not required - hosted checkout works without it + if (!isSupabaseConfigured || error) { setUseStaticVersion(true); } }, [error]); diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx index 3bdd06baf..ba937263a 100644 --- a/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx +++ b/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx @@ -101,46 +101,6 @@ const StaticPlanSection: React.FC = ({ currentLicenseInf return (
- {/* Current Plan Section */} -
-

- {t('plan.activePlan.title', 'Active Plan')} -

-

- {t('plan.activePlan.subtitle', 'Your current subscription details')} -

- - - - - - - {currentPlan.name} - - - {t('subscription.status.active', 'Active')} - - - {currentLicenseInfo && ( - - {t('plan.static.maxUsers', 'Max Users')}: {currentLicenseInfo.maxUsers} - - )} - -
- - {currentPlan.price === 0 ? t('plan.free.name', 'Free') : `${currentPlan.currency}${currentPlan.price}${currentPlan.period}`} - -
- - -
{/* Available Plans */}
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx index e2aa7f540..2743a4906 100644 --- a/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx +++ b/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx @@ -1,8 +1,7 @@ import React, { useEffect } from 'react'; -import { Modal, Text, Alert, Stack, Button, Group, ActionIcon } from '@mantine/core'; +import { Modal, Text, Group, ActionIcon } from '@mantine/core'; import { useTranslation } from 'react-i18next'; import LocalIcon from '@app/components/shared/LocalIcon'; -import { loadStripe } from '@stripe/stripe-js'; import licenseService from '@app/services/licenseService'; import { useIsMobile } from '@app/hooks/useIsMobile'; import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex'; @@ -37,8 +36,6 @@ if (STRIPE_KEY && !STRIPE_KEY.startsWith('pk_')) { ); } -const stripePromise = STRIPE_KEY ? loadStripe(STRIPE_KEY) : null; - const StripeCheckout: React.FC = ({ opened, onClose, @@ -192,25 +189,8 @@ const StripeCheckout: React.FC = ({ // Render stage content const renderContent = () => { - // Check if Stripe is configured - if (!stripePromise) { - return ( - - - - {t( - 'payment.stripeNotConfiguredMessage', - 'Stripe payment integration is not configured. Please contact your administrator.' - )} - - - - - ); - } - + // Don't block checkout - hosted mode works without publishable key + // The checkout will automatically redirect to Stripe hosted page if key is missing switch (checkoutState.state.currentStage) { case 'email': return ( diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx index 9cee1983c..84664f873 100644 --- a/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx +++ b/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx @@ -35,10 +35,15 @@ export const PaymentStage: React.FC = ({ } if (!stripePromise) { + // This should only happen if embedded mode was attempted without key + // Hosted checkout should have redirected before reaching this component return ( - - Stripe is not configured properly. - + + + + {t('payment.redirecting', 'Redirecting to secure checkout...')} + + ); } diff --git a/frontend/src/proprietary/contexts/CheckoutContext.tsx b/frontend/src/proprietary/contexts/CheckoutContext.tsx index f8c544934..d6c6db86c 100644 --- a/frontend/src/proprietary/contexts/CheckoutContext.tsx +++ b/frontend/src/proprietary/contexts/CheckoutContext.tsx @@ -1,7 +1,6 @@ import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; -import { usePlans } from '@app/hooks/usePlans'; -import licenseService, { PlanTierGroup, LicenseInfo, mapLicenseToTier } from '@app/services/licenseService'; +import licenseService, { PlanTierGroup, LicenseInfo, mapLicenseToTier, PlanTier } from '@app/services/licenseService'; import { StripeCheckout } from '@app/components/shared/stripeCheckout'; import { userManagementService } from '@app/services/userManagementService'; import { alert } from '@app/components/toast'; @@ -54,8 +53,33 @@ export const CheckoutProvider: React.FC = ({ licenseKey?: string; } | null>(null); - // Load plans with current currency - const { plans, refetch: refetchPlans } = usePlans(currentCurrency); + // Lazy-loaded plans state (no fetch on mount) + const [plans, setPlans] = useState([]); + const [plansLoaded, setPlansLoaded] = useState(false); + const [plansLoading, setPlansLoading] = useState(false); + + // Lazy fetch plans only when needed + const fetchPlansIfNeeded = useCallback(async (currency: string) => { + // Don't fetch if already loading + if (plansLoading) return; + + try { + setPlansLoading(true); + const response = await licenseService.getPlans(currency); + setPlans(response.plans); + setPlansLoaded(true); + } catch (error) { + console.error('Failed to fetch plans:', error); + // Don't block - let components handle the error + } finally { + setPlansLoading(false); + } + }, [plansLoading]); + + const refetchPlans = useCallback(() => { + setPlansLoaded(false); // Force refetch + return fetchPlansIfNeeded(currentCurrency); + }, [currentCurrency, fetchPlansIfNeeded]); // Handle return from hosted Stripe checkout useEffect(() => { @@ -89,6 +113,11 @@ export const CheckoutProvider: React.FC = ({ if (activation.success) { console.log('License synced successfully, refreshing license context'); + // Ensure plans are loaded before using them + if (!plansLoaded) { + await fetchPlansIfNeeded(currentCurrency); + } + // Refresh global license context await refetchLicense(); await refetchPlans(); @@ -135,6 +164,11 @@ export const CheckoutProvider: React.FC = ({ if (activation.success) { console.log(`License key activated: ${activation.licenseType}`); + // Ensure plans are loaded before using them + if (!plansLoaded) { + await fetchPlansIfNeeded(currentCurrency); + } + // Refresh global license context await refetchLicense(); await refetchPlans(); @@ -201,7 +235,7 @@ export const CheckoutProvider: React.FC = ({ }; handleCheckoutReturn(); - }, [t, refetchPlans, refetchLicense, plans]); + }, [t, refetchPlans, refetchLicense, plans, fetchPlansIfNeeded, plansLoaded, currentCurrency]); const openCheckout = useCallback( async (tier: 'server' | 'enterprise', options: CheckoutOptions = {}) => { @@ -217,7 +251,11 @@ export const CheckoutProvider: React.FC = ({ const currency = options.currency || currentCurrency; if (currency !== currentCurrency) { setCurrentCurrency(currency); - // Plans will reload automatically via usePlans + } + + // Fetch plans if not already loaded + if (!plansLoaded) { + await fetchPlansIfNeeded(currency); } // Fetch license info and user data for seat calculations @@ -277,7 +315,7 @@ export const CheckoutProvider: React.FC = ({ setIsLoading(false); } }, - [currentCurrency, plans] + [currentCurrency, plans, plansLoaded, fetchPlansIfNeeded] ); const closeCheckout = useCallback(() => { diff --git a/frontend/src/proprietary/utils/protocolDetection.ts b/frontend/src/proprietary/utils/protocolDetection.ts index eb5d0a29a..4f7e328c5 100644 --- a/frontend/src/proprietary/utils/protocolDetection.ts +++ b/frontend/src/proprietary/utils/protocolDetection.ts @@ -3,6 +3,16 @@ * Used to decide between Embedded Checkout (HTTPS) and Hosted Checkout (HTTP) */ +/** + * Check if Stripe publishable key is configured + * Similar to isSupabaseConfigured pattern - checks availability at decision points + * @returns true if key exists and has valid format + */ +export function isStripeConfigured(): boolean { + const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY; + return !!stripeKey && stripeKey.startsWith('pk_'); +} + /** * Check if the current context is secure (HTTPS or localhost) * @returns true if HTTPS or localhost, false if HTTP @@ -28,16 +38,24 @@ export function isSecureContext(): boolean { /** * Get the appropriate Stripe checkout UI mode based on current context - * @returns 'embedded' for HTTPS/localhost, 'hosted' for HTTP + * @returns 'embedded' for HTTPS with key, 'hosted' for HTTP or missing key */ export function getCheckoutMode(): 'embedded' | 'hosted' { + // Force hosted checkout if no publishable key (regardless of protocol) + // Hosted checkout works without the key - it just redirects to Stripe + if (!isStripeConfigured()) { + return 'hosted'; + } + + // Normal protocol-based detection if key is available return isSecureContext() ? 'embedded' : 'hosted'; } /** * Check if Embedded Checkout can be used in current context - * @returns true if secure context (HTTPS/localhost) + * Requires both HTTPS and Stripe publishable key + * @returns true if secure context AND key is configured */ export function canUseEmbeddedCheckout(): boolean { - return isSecureContext(); + return isSecureContext() && isStripeConfigured(); }