Auto detect currency

frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx

@@ -236,9 +236,6 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
           <PaymentStage
             clientSecret={checkoutState.state.clientSecret || null}
             selectedPlan={checkoutState.selectedPlan}
-            selectedPeriod={checkoutState.selectedPeriod}
-            planName={planGroup.name}
-            loading={checkoutState.state.loading || false}
             onPaymentComplete={session.handlePaymentComplete}
           />
         );

frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, Button, Paper, Group, Text, Loader } from '@mantine/core';
+import { Stack, Text, Loader } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { loadStripe } from '@stripe/stripe-js';
 import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js';
@@ -12,18 +12,12 @@ const stripePromise = STRIPE_KEY ? loadStripe(STRIPE_KEY) : null;
 interface PaymentStageProps {
   clientSecret: string | null;
   selectedPlan: PlanTier | null;
-  selectedPeriod: 'monthly' | 'yearly';
-  planName: string;
-  loading: boolean;
   onPaymentComplete: () => void;
 }
 
 export const PaymentStage: React.FC<PaymentStageProps> = ({
   clientSecret,
   selectedPlan,
-  selectedPeriod,
-  planName,
-  loading,
   onPaymentComplete,
 }) => {
   const { t } = useTranslation();
@@ -50,22 +44,6 @@ export const PaymentStage: React.FC<PaymentStageProps> = ({
 
   return (
     <Stack gap="md">
-      {/* Selected plan summary */}
-      <Paper withBorder p="md" radius="md" bg="gray.0">
-        <Group justify="space-between">
-          <div>
-            <Text size="sm" c="dimmed">
-              {t('payment.paymentStage.selectedPlan', 'Selected Plan')}
-            </Text>
-            <Text size="lg" fw={600}>
-              {planName} - {selectedPeriod === 'yearly' ? t('payment.yearly', 'Yearly') : t('payment.monthly', 'Monthly')}
-            </Text>
-          </div>
-          <Text size="xl" fw={700}>
-            {selectedPlan.currency}{selectedPlan.price.toFixed(2)}
-          </Text>
-        </Group>
-      </Paper>
 
       {/* Stripe Embedded Checkout */}
       <EmbeddedCheckoutProvider

frontend/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx

@@ -6,7 +6,7 @@ import { SavingsCalculation } from '@app/components/shared/stripeCheckout/types/
 import { PricingBadge } from '@app/components/shared/stripeCheckout/components/PricingBadge';
 import { PriceDisplay } from '@app/components/shared/stripeCheckout/components/PriceDisplay';
 import { formatPrice, calculateMonthlyEquivalent, calculateTotalWithSeats } from '@app/components/shared/stripeCheckout/utils/pricingUtils';
-import { getClickablePaperStyle, PRICE_FONT_WEIGHT } from '@app/components/shared/stripeCheckout/utils/cardStyles';
+import { getClickablePaperStyle } from '@app/components/shared/stripeCheckout/utils/cardStyles';
 
 interface PlanSelectionStageProps {
   planGroup: PlanTierGroup;
@@ -118,10 +118,7 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                     <Text size="sm" c="dimmed">
                       {t('payment.planStage.billedYearly', 'Billed yearly at {{currency}}{{amount}}', {
                         currency: planGroup.yearly.currency,
-                        amount: formatPrice(
-                          calculateTotalWithSeats(planGroup.yearly.price, planGroup.yearly.seatPrice, seatCount),
-                          planGroup.yearly.currency
-                        )
+                        amount: calculateTotalWithSeats(planGroup.yearly.price, planGroup.yearly.seatPrice, seatCount).toFixed(2)
                       })}
                     </Text>
                   </Stack>

frontend/src/proprietary/utils/protocolDetection.ts

@@ -10,13 +10,13 @@
 export function isSecureContext(): boolean {
   // Allow localhost for development (works with both HTTP and HTTPS)
   if (typeof window !== 'undefined') {
-    // const hostname = window.location.hostname;
     const protocol = window.location.protocol;
 
     // Localhost is considered secure for development
-    // if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '[::1]') {
-    //   return true;
-    // }
+    const hostname = window.location.hostname;
+    if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '[::1]') {
+      return true;
+    }
 
     // Check if HTTPS
     return protocol === 'https:';