vor marketing zu website umbenennung. stripe ist lauffähig
This commit is contained in:
Codex Agent
@@ -1,3 +1,188 @@
|
||||
import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react';
|
||||
import type { CheckoutPackage, CheckoutStepId } from './types';
|
||||
|
||||
interface CheckoutState {
|
||||
currentStep: CheckoutStepId;
|
||||
selectedPackage: CheckoutPackage | null;
|
||||
packageOptions: CheckoutPackage[];
|
||||
authUser: any;
|
||||
isAuthenticated: boolean;
|
||||
paymentIntent: string | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
interface CheckoutWizardContextType {
|
||||
state: CheckoutState;
|
||||
selectedPackage: CheckoutPackage | null;
|
||||
packageOptions: CheckoutPackage[];
|
||||
currentStep: CheckoutStepId;
|
||||
isAuthenticated: boolean;
|
||||
authUser: any;
|
||||
selectPackage: (pkg: CheckoutPackage) => void;
|
||||
setSelectedPackage: (pkg: CheckoutPackage) => void;
|
||||
setAuthUser: (user: any) => void;
|
||||
nextStep: () => void;
|
||||
prevStep: () => void;
|
||||
previousStep: () => void;
|
||||
goToStep: (step: CheckoutStepId) => void;
|
||||
cancelCheckout: () => void;
|
||||
updatePaymentIntent: (clientSecret: string | null) => void;
|
||||
setLoading: (loading: boolean) => void;
|
||||
setError: (error: string | null) => void;
|
||||
resetPaymentState: () => void;
|
||||
}
|
||||
|
||||
const CheckoutWizardContext = createContext<CheckoutWizardContextType | null>(null);
|
||||
|
||||
const initialState: CheckoutState = {
|
||||
currentStep: 'package',
|
||||
selectedPackage: null,
|
||||
packageOptions: [],
|
||||
authUser: null,
|
||||
isAuthenticated: false,
|
||||
paymentIntent: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
type CheckoutAction =
|
||||
| { type: 'SELECT_PACKAGE'; payload: CheckoutPackage }
|
||||
| { type: 'SET_AUTH_USER'; payload: any }
|
||||
| { type: 'NEXT_STEP' }
|
||||
| { type: 'PREV_STEP' }
|
||||
| { type: 'GO_TO_STEP'; payload: CheckoutStepId }
|
||||
| { type: 'UPDATE_PAYMENT_INTENT'; payload: string | null }
|
||||
| { type: 'SET_LOADING'; payload: boolean }
|
||||
| { type: 'SET_ERROR'; payload: string | null };
|
||||
|
||||
function checkoutReducer(state: CheckoutState, action: CheckoutAction): CheckoutState {
|
||||
switch (action.type) {
|
||||
case 'SELECT_PACKAGE':
|
||||
return { ...state, selectedPackage: action.payload };
|
||||
case 'SET_AUTH_USER':
|
||||
return { ...state, authUser: action.payload };
|
||||
case 'NEXT_STEP':
|
||||
const steps: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
|
||||
const currentIndex = steps.indexOf(state.currentStep);
|
||||
if (currentIndex < steps.length - 1) {
|
||||
return { ...state, currentStep: steps[currentIndex + 1] };
|
||||
}
|
||||
return state;
|
||||
case 'PREV_STEP':
|
||||
const prevSteps: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
|
||||
const prevIndex = prevSteps.indexOf(state.currentStep);
|
||||
if (prevIndex > 0) {
|
||||
return { ...state, currentStep: prevSteps[prevIndex - 1] };
|
||||
}
|
||||
return state;
|
||||
case 'GO_TO_STEP':
|
||||
return { ...state, currentStep: action.payload };
|
||||
case 'UPDATE_PAYMENT_INTENT':
|
||||
return { ...state, paymentIntent: action.payload };
|
||||
case 'SET_LOADING':
|
||||
return { ...state, loading: action.payload };
|
||||
case 'SET_ERROR':
|
||||
return { ...state, error: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
interface CheckoutWizardProviderProps {
|
||||
children: React.ReactNode;
|
||||
initialPackage?: CheckoutPackage;
|
||||
packageOptions?: CheckoutPackage[];
|
||||
initialStep?: CheckoutStepId;
|
||||
initialAuthUser?: any;
|
||||
initialIsAuthenticated?: boolean;
|
||||
}
|
||||
|
||||
export function CheckoutWizardProvider({
|
||||
children,
|
||||
initialPackage,
|
||||
packageOptions,
|
||||
initialStep,
|
||||
initialAuthUser,
|
||||
initialIsAuthenticated
|
||||
}: CheckoutWizardProviderProps) {
|
||||
const customInitialState: CheckoutState = {
|
||||
...initialState,
|
||||
currentStep: initialStep || 'package',
|
||||
selectedPackage: initialPackage || null,
|
||||
packageOptions: packageOptions || [],
|
||||
authUser: initialAuthUser || null,
|
||||
isAuthenticated: initialIsAuthenticated || Boolean(initialAuthUser),
|
||||
};
|
||||
|
||||
|
||||
const [state, dispatch] = useReducer(checkoutReducer, customInitialState);
|
||||
|
||||
// Load state from localStorage on mount
|
||||
useEffect(() => {
|
||||
const savedState = localStorage.getItem('checkout-wizard-state');
|
||||
if (savedState) {
|
||||
try {
|
||||
const parsed = JSON.parse(savedState);
|
||||
// Restore state selectively
|
||||
if (parsed.selectedPackage) dispatch({ type: 'SELECT_PACKAGE', payload: parsed.selectedPackage });
|
||||
if (parsed.currentStep) dispatch({ type: 'GO_TO_STEP', payload: parsed.currentStep });
|
||||
} catch (error) {
|
||||
console.error('Failed to restore checkout state:', error);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Save state to localStorage whenever it changes
|
||||
useEffect(() => {
|
||||
localStorage.setItem('checkout-wizard-state', JSON.stringify({
|
||||
selectedPackage: state.selectedPackage,
|
||||
currentStep: state.currentStep,
|
||||
}));
|
||||
}, [state.selectedPackage, state.currentStep]);
|
||||
|
||||
const selectPackage = useCallback((pkg: CheckoutPackage) => {
|
||||
dispatch({ type: 'SELECT_PACKAGE', payload: pkg });
|
||||
}, []);
|
||||
|
||||
const setAuthUser = useCallback((user: any) => {
|
||||
dispatch({ type: 'SET_AUTH_USER', payload: user });
|
||||
}, []);
|
||||
|
||||
const nextStep = useCallback(() => {
|
||||
dispatch({ type: 'NEXT_STEP' });
|
||||
}, []);
|
||||
|
||||
const prevStep = useCallback(() => {
|
||||
dispatch({ type: 'PREV_STEP' });
|
||||
}, []);
|
||||
|
||||
const goToStep = useCallback((step: CheckoutStepId) => {
|
||||
dispatch({ type: 'GO_TO_STEP', payload: step });
|
||||
}, []);
|
||||
|
||||
const updatePaymentIntent = useCallback((clientSecret: string | null) => {
|
||||
dispatch({ type: 'UPDATE_PAYMENT_INTENT', payload: clientSecret });
|
||||
}, []);
|
||||
|
||||
const setLoading = useCallback((loading: boolean) => {
|
||||
dispatch({ type: 'SET_LOADING', payload: loading });
|
||||
}, []);
|
||||
|
||||
const setError = useCallback((error: string | null) => {
|
||||
dispatch({ type: 'SET_ERROR', payload: error });
|
||||
}, []);
|
||||
|
||||
const setSelectedPackage = useCallback((pkg: CheckoutPackage) => {
|
||||
dispatch({ type: 'SELECT_PACKAGE', payload: pkg });
|
||||
}, []);
|
||||
|
||||
const resetPaymentState = useCallback(() => {
|
||||
dispatch({ type: 'UPDATE_PAYMENT_INTENT', payload: null });
|
||||
dispatch({ type: 'SET_LOADING', payload: false });
|
||||
dispatch({ type: 'SET_ERROR', payload: null });
|
||||
}, []);
|
||||
|
||||
const cancelCheckout = useCallback(() => {
|
||||
// Track abandoned checkout (fire and forget)
|
||||
if (state.authUser || state.selectedPackage) {
|
||||
@@ -8,9 +193,8 @@
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
package_id: state.selectedPackage.id,
|
||||
last_step: ['package', 'auth', 'payment', 'confirmation'].indexOf(state.currentStep) + 1,
|
||||
user_id: state.authUser?.id,
|
||||
package_id: state.selectedPackage?.id,
|
||||
step: state.currentStep,
|
||||
email: state.authUser?.email,
|
||||
}),
|
||||
}).catch(error => {
|
||||
@@ -23,3 +207,39 @@
|
||||
// Zur Package-Übersicht zurückleiten
|
||||
window.location.href = '/packages';
|
||||
}, [state]);
|
||||
|
||||
const value: CheckoutWizardContextType = {
|
||||
state,
|
||||
selectedPackage: state.selectedPackage,
|
||||
packageOptions: state.packageOptions,
|
||||
currentStep: state.currentStep,
|
||||
isAuthenticated: state.isAuthenticated,
|
||||
authUser: state.authUser,
|
||||
selectPackage,
|
||||
setSelectedPackage,
|
||||
setAuthUser,
|
||||
nextStep,
|
||||
prevStep,
|
||||
previousStep: prevStep,
|
||||
goToStep,
|
||||
cancelCheckout,
|
||||
updatePaymentIntent,
|
||||
setLoading,
|
||||
setError,
|
||||
resetPaymentState,
|
||||
};
|
||||
|
||||
return (
|
||||
<CheckoutWizardContext.Provider value={value}>
|
||||
{children}
|
||||
</CheckoutWizardContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useCheckoutWizard(): CheckoutWizardContextType {
|
||||
const context = useContext(CheckoutWizardContext);
|
||||
if (!context) {
|
||||
throw new Error('useCheckoutWizard must be used within a CheckoutWizardProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user