fixed event join token handling in the event admin. created new seeders with new tenants and package purchases. added new playwright test scenarios.

resources/js/pages/marketing/checkout/CheckoutWizard.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useEffect, useCallback } from "react";
+import React, { useMemo, useRef, useEffect, useCallback, Suspense, lazy } from "react";
 import { useTranslation } from 'react-i18next';
 import { Steps } from "@/components/ui/Steps";
 import { Button } from "@/components/ui/button";
@@ -7,10 +7,11 @@ import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
 import type { CheckoutPackage, CheckoutStepId } from "./types";
 import { PackageStep } from "./steps/PackageStep";
 import { AuthStep } from "./steps/AuthStep";
-import { PaymentStep } from "./steps/PaymentStep";
 import { ConfirmationStep } from "./steps/ConfirmationStep";
 import { useAnalytics } from '@/hooks/useAnalytics';
 
+const PaymentStep = lazy(() => import('./steps/PaymentStep').then((module) => ({ default: module.PaymentStep })));
+
 interface CheckoutWizardProps {
   initialPackage: CheckoutPackage;
   packageOptions: CheckoutPackage[];
@@ -52,6 +53,14 @@ const baseStepConfig: { id: CheckoutStepId; titleKey: string; descriptionKey: st
     detailsKey: 'checkout.confirmation_step.description'
   },
 ];
+
+const PaymentStepFallback: React.FC = () => (
+  <div className="rounded-lg border bg-card p-6 shadow-sm">
+    <div className="mb-4 h-4 w-52 animate-pulse rounded bg-muted" />
+    <div className="h-10 w-full animate-pulse rounded bg-muted" />
+  </div>
+);
+
 const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: string; privacyHtml: string }> = ({ stripePublishableKey, paypalClientId, privacyHtml }) => {
   const { t } = useTranslation('marketing');
   const { currentStep, nextStep, previousStep } = useCheckoutWizard();
@@ -144,7 +153,9 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
         {currentStep === "package" && <PackageStep />}
         {currentStep === "auth" && <AuthStep privacyHtml={privacyHtml} />}
         {currentStep === "payment" && (
-          <PaymentStep stripePublishableKey={stripePublishableKey} paypalClientId={paypalClientId} />
+          <Suspense fallback={<PaymentStepFallback />}>
+            <PaymentStep stripePublishableKey={stripePublishableKey} paypalClientId={paypalClientId} />
+          </Suspense>
         )}
         {currentStep === "confirmation" && (
           <ConfirmationStep onViewProfile={handleViewProfile} onGoToAdmin={handleGoToAdmin} />

resources/js/pages/marketing/checkout/steps/PaymentStep.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
 import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { LoaderCircle } from 'lucide-react';
 import { useCheckoutWizard } from '../WizardContext';
+import { getStripe } from '@/utils/stripe';
 
 interface PaymentStepProps {
   stripePublishableKey: string;
@@ -243,10 +243,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey,
   const [intentRefreshKey, setIntentRefreshKey] = useState(0);
   const [processingProvider, setProcessingProvider] = useState<Provider | null>(null);
 
-  const stripePromise = useMemo(
-    () => (stripePublishableKey ? loadStripe(stripePublishableKey) : null),
-    [stripePublishableKey]
-  );
+  const stripePromise = useMemo(() => getStripe(stripePublishableKey), [stripePublishableKey]);
   const isFree = useMemo(() => (selectedPackage ? selectedPackage.price <= 0 : false), [selectedPackage]);
   const isReseller = selectedPackage?.type === 'reseller';