switched to paddle inline checkout, removed paypal and most of stripe. added product sync between app and paddle.

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

@@ -1,10 +1,10 @@
-import React, { useMemo, useRef, useEffect, useCallback, Suspense, lazy } from "react";
+import React, { useMemo, useRef, useEffect, useCallback, Suspense, lazy, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import { Steps } from "@/components/ui/Steps";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
-import type { CheckoutPackage, CheckoutStepId } from "./types";
+import type { CheckoutPackage, CheckoutStepId, GoogleProfilePrefill } from "./types";
 import { PackageStep } from "./steps/PackageStep";
 import { AuthStep } from "./steps/AuthStep";
 import { ConfirmationStep } from "./steps/ConfirmationStep";
@@ -15,8 +15,6 @@ const PaymentStep = lazy(() => import('./steps/PaymentStep').then((module) => ({
 interface CheckoutWizardProps {
   initialPackage: CheckoutPackage;
   packageOptions: CheckoutPackage[];
-  stripePublishableKey: string;
-  paypalClientId: string;
   privacyHtml: string;
   initialAuthUser?: {
     id: number;
@@ -25,6 +23,11 @@ interface CheckoutWizardProps {
     pending_purchase?: boolean;
   } | null;
   initialStep?: CheckoutStepId;
+  googleProfile?: GoogleProfilePrefill | null;
+  paddle?: {
+    environment?: string | null;
+    client_token?: string | null;
+  } | null;
 }
 
 const baseStepConfig: { id: CheckoutStepId; titleKey: string; descriptionKey: string; detailsKey: string }[] = [
@@ -61,13 +64,34 @@ const PaymentStepFallback: React.FC = () => (
   </div>
 );
 
-const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: string; privacyHtml: string }> = ({ stripePublishableKey, paypalClientId, privacyHtml }) => {
+const WizardBody: React.FC<{
+  privacyHtml: string;
+  googleProfile?: GoogleProfilePrefill | null;
+  onClearGoogleProfile?: () => void;
+}> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
   const { t } = useTranslation('marketing');
-  const { currentStep, nextStep, previousStep } = useCheckoutWizard();
+  const {
+    currentStep,
+    nextStep,
+    previousStep,
+    selectedPackage,
+    authUser,
+    isAuthenticated,
+    paymentCompleted,
+  } = useCheckoutWizard();
   const progressRef = useRef<HTMLDivElement | null>(null);
   const hasMountedRef = useRef(false);
   const { trackEvent } = useAnalytics();
 
+  const isFreeSelected = useMemo(() => {
+    if (!selectedPackage) {
+      return false;
+    }
+
+    const priceValue = Number(selectedPackage.price);
+    return Number.isFinite(priceValue) && priceValue <= 0;
+  }, [selectedPackage]);
+
   const stepConfig = useMemo(() =>
     baseStepConfig.map(step => ({
       id: step.id,
@@ -114,7 +138,41 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
     });
   }, [currentStep]);
 
+  const atLastStep = currentIndex >= stepConfig.length - 1;
+
+  const canProceedToNextStep = useMemo(() => {
+    if (atLastStep) {
+      return false;
+    }
+
+    if (currentStep === 'package') {
+      return Boolean(selectedPackage);
+    }
+
+    if (currentStep === 'auth') {
+      return Boolean(isAuthenticated && authUser);
+    }
+
+    if (currentStep === 'payment') {
+      return isFreeSelected || paymentCompleted;
+    }
+
+    return true;
+  }, [atLastStep, authUser, currentStep, isAuthenticated, isFreeSelected, paymentCompleted, selectedPackage]);
+
+  const shouldShowNextButton = useMemo(() => {
+    if (currentStep !== 'payment') {
+      return true;
+    }
+
+    return isFreeSelected || paymentCompleted;
+  }, [currentStep, isFreeSelected, paymentCompleted]);
+
   const handleNext = useCallback(() => {
+    if (!canProceedToNextStep) {
+      return;
+    }
+
     const targetStep = stepConfig[currentIndex + 1]?.id ?? 'end';
     trackEvent({
       category: 'marketing_checkout',
@@ -122,7 +180,7 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
       name: `${currentStep}->${targetStep}`,
     });
     nextStep();
-  }, [currentIndex, currentStep, nextStep, stepConfig, trackEvent]);
+  }, [canProceedToNextStep, currentIndex, currentStep, nextStep, stepConfig, trackEvent]);
 
   const handlePrevious = useCallback(() => {
     const targetStep = stepConfig[currentIndex - 1]?.id ?? 'start';
@@ -151,10 +209,16 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
 
       <div className="space-y-6">
         {currentStep === "package" && <PackageStep />}
-        {currentStep === "auth" && <AuthStep privacyHtml={privacyHtml} />}
+        {currentStep === "auth" && (
+          <AuthStep
+            privacyHtml={privacyHtml}
+            googleProfile={googleProfile ?? undefined}
+            onClearGoogleProfile={onClearGoogleProfile}
+          />
+        )}
         {currentStep === "payment" && (
           <Suspense fallback={<PaymentStepFallback />}>
-            <PaymentStep stripePublishableKey={stripePublishableKey} paypalClientId={paypalClientId} />
+            <PaymentStep />
           </Suspense>
         )}
         {currentStep === "confirmation" && (
@@ -162,13 +226,17 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
         )}
       </div>
 
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between gap-4">
         <Button variant="ghost" onClick={handlePrevious} disabled={currentIndex <= 0}>
           {t('checkout.back')}
         </Button>
-        <Button onClick={handleNext} disabled={currentIndex >= stepConfig.length - 1}>
-          {t('checkout.next')}
-        </Button>
+        {shouldShowNextButton ? (
+          <Button onClick={handleNext} disabled={!canProceedToNextStep}>
+            {t('checkout.next')}
+          </Button>
+        ) : (
+          <div className="h-10 min-w-[128px]" aria-hidden="true" />
+        )}
       </div>
     </div>
   );
@@ -177,12 +245,51 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
 export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
   initialPackage,
   packageOptions,
-  stripePublishableKey,
-  paypalClientId,
   privacyHtml,
   initialAuthUser,
   initialStep,
+  googleProfile,
+  paddle,
 }) => {
+  const [storedProfile, setStoredProfile] = useState<GoogleProfilePrefill | null>(() => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+
+    const raw = window.localStorage.getItem('checkout-google-profile');
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      return JSON.parse(raw) as GoogleProfilePrefill;
+    } catch (error) {
+      console.warn('Failed to parse checkout google profile from storage', error);
+      window.localStorage.removeItem('checkout-google-profile');
+      return null;
+    }
+  });
+
+  useEffect(() => {
+    if (!googleProfile) {
+      return;
+    }
+
+    setStoredProfile(googleProfile);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('checkout-google-profile', JSON.stringify(googleProfile));
+    }
+  }, [googleProfile]);
+
+  const clearStoredProfile = useCallback(() => {
+    setStoredProfile(null);
+    if (typeof window !== 'undefined') {
+      window.localStorage.removeItem('checkout-google-profile');
+    }
+  }, []);
+
+  const effectiveProfile = googleProfile ?? storedProfile;
 
   return (
     <CheckoutWizardProvider
@@ -191,8 +298,13 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
       initialStep={initialStep}
       initialAuthUser={initialAuthUser ?? undefined}
       initialIsAuthenticated={Boolean(initialAuthUser)}
+      paddle={paddle ?? null}
     >
-      <WizardBody stripePublishableKey={stripePublishableKey} paypalClientId={paypalClientId} privacyHtml={privacyHtml} />
+      <WizardBody
+        privacyHtml={privacyHtml}
+        googleProfile={effectiveProfile}
+        onClearGoogleProfile={clearStoredProfile}
+      />
     </CheckoutWizardProvider>
   );
 };