Add Facebook social login

resources/js/pages/marketing/CheckoutWizardPage.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Head, usePage } from "@inertiajs/react";
 import MarketingLayout from "@/layouts/mainWebsite";
-import type { CheckoutPackage, GoogleProfilePrefill } from "./checkout/types";
+import type { CheckoutPackage, OAuthProfilePrefill } from "./checkout/types";
 import { CheckoutWizard } from "./checkout/CheckoutWizard";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import toast from "react-hot-toast";
@@ -14,7 +14,12 @@ interface CheckoutWizardPageProps {
   googleAuth?: {
     status?: string | null;
     error?: string | null;
-    profile?: GoogleProfilePrefill | null;
+    profile?: OAuthProfilePrefill | null;
+  };
+  facebookAuth?: {
+    status?: string | null;
+    error?: string | null;
+    profile?: OAuthProfilePrefill | null;
   };
   paddle?: {
     environment?: string | null;
@@ -27,11 +32,13 @@ const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
   packageOptions,
   privacyHtml,
   googleAuth,
+  facebookAuth,
   paddle,
 }) => {
   const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null }, flash?: { verification?: { status: string; title?: string; message?: string } } }>();
   const currentUser = page.props.auth?.user ?? null;
   const googleProfile = googleAuth?.profile ?? null;
+  const facebookProfile = facebookAuth?.profile ?? null;
   const { t: tAuth } = useTranslation('auth');
   const verificationFlash = page.props.flash?.verification;
 
@@ -85,6 +92,7 @@ const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
             privacyHtml={privacyHtml}
             initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
             googleProfile={googleProfile}
+            facebookProfile={facebookProfile}
             paddle={paddle ?? null}
           />
         </div>