Add Facebook social login

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

@@ -4,7 +4,7 @@ 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, GoogleProfilePrefill } from "./types";
+import type { CheckoutPackage, CheckoutStepId, OAuthProfilePrefill } from "./types";
 import { PackageStep } from "./steps/PackageStep";
 import { AuthStep } from "./steps/AuthStep";
 import { ConfirmationStep } from "./steps/ConfirmationStep";
@@ -25,7 +25,8 @@ interface CheckoutWizardProps {
     pending_purchase?: boolean;
   } | null;
   initialStep?: CheckoutStepId;
-  googleProfile?: GoogleProfilePrefill | null;
+  googleProfile?: OAuthProfilePrefill | null;
+  facebookProfile?: OAuthProfilePrefill | null;
   paddle?: {
     environment?: string | null;
     client_token?: string | null;
@@ -68,9 +69,9 @@ const PaymentStepFallback: React.FC = () => (
 
 const WizardBody: React.FC<{
   privacyHtml: string;
-  googleProfile?: GoogleProfilePrefill | null;
-  onClearGoogleProfile?: () => void;
-}> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
+  prefillProfile?: OAuthProfilePrefill | null;
+  onClearPrefill?: () => void;
+}> = ({ privacyHtml, prefillProfile, onClearPrefill }) => {
   const primaryCtaClassName = "min-w-[160px] disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted disabled:hover:text-muted-foreground";
   const { t } = useTranslation('marketing');
   const {
@@ -246,8 +247,8 @@ const WizardBody: React.FC<{
         {currentStep === "auth" && (
           <AuthStep
             privacyHtml={privacyHtml}
-            googleProfile={googleProfile ?? undefined}
-            onClearGoogleProfile={onClearGoogleProfile}
+            prefill={prefillProfile ?? undefined}
+            onClearPrefill={onClearPrefill}
           />
         )}
         {currentStep === "payment" && (
@@ -288,9 +289,10 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
   initialAuthUser,
   initialStep,
   googleProfile,
+  facebookProfile,
   paddle,
 }) => {
-  const [storedProfile, setStoredProfile] = useState<GoogleProfilePrefill | null>(() => {
+  const [storedGoogleProfile, setStoredGoogleProfile] = useState<OAuthProfilePrefill | null>(() => {
     if (typeof window === 'undefined') {
       return null;
     }
@@ -301,7 +303,7 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
     }
 
     try {
-      return JSON.parse(raw) as GoogleProfilePrefill;
+      return JSON.parse(raw) as OAuthProfilePrefill;
     } catch (error) {
       console.warn('Failed to parse checkout google profile from storage', error);
       window.localStorage.removeItem('checkout-google-profile');
@@ -314,21 +316,64 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
       return;
     }
 
-    setStoredProfile(googleProfile);
+    setStoredGoogleProfile(googleProfile);
 
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('checkout-google-profile', JSON.stringify(googleProfile));
     }
   }, [googleProfile]);
 
-  const clearStoredProfile = useCallback(() => {
-    setStoredProfile(null);
+  const clearStoredGoogleProfile = useCallback(() => {
+    setStoredGoogleProfile(null);
     if (typeof window !== 'undefined') {
       window.localStorage.removeItem('checkout-google-profile');
     }
   }, []);
 
-  const effectiveProfile = googleProfile ?? storedProfile;
+  const [storedFacebookProfile, setStoredFacebookProfile] = useState<OAuthProfilePrefill | null>(() => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+
+    const raw = window.localStorage.getItem('checkout-facebook-profile');
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      return JSON.parse(raw) as OAuthProfilePrefill;
+    } catch (error) {
+      console.warn('Failed to parse checkout facebook profile from storage', error);
+      window.localStorage.removeItem('checkout-facebook-profile');
+      return null;
+    }
+  });
+
+  useEffect(() => {
+    if (!facebookProfile) {
+      return;
+    }
+
+    setStoredFacebookProfile(facebookProfile);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('checkout-facebook-profile', JSON.stringify(facebookProfile));
+    }
+  }, [facebookProfile]);
+
+  const clearStoredFacebookProfile = useCallback(() => {
+    setStoredFacebookProfile(null);
+    if (typeof window !== 'undefined') {
+      window.localStorage.removeItem('checkout-facebook-profile');
+    }
+  }, []);
+
+  const clearStoredProfiles = useCallback(() => {
+    clearStoredGoogleProfile();
+    clearStoredFacebookProfile();
+  }, [clearStoredFacebookProfile, clearStoredGoogleProfile]);
+
+  const effectiveProfile = facebookProfile ?? storedFacebookProfile ?? googleProfile ?? storedGoogleProfile;
 
   return (
     <CheckoutWizardProvider
@@ -341,8 +386,8 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
     >
       <WizardBody
         privacyHtml={privacyHtml}
-        googleProfile={effectiveProfile}
-        onClearGoogleProfile={clearStoredProfile}
+        prefillProfile={effectiveProfile}
+        onClearPrefill={clearStoredProfiles}
       />
     </CheckoutWizardProvider>
   );