117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
import { useEffect } from 'react';
|
|
import PaymentMethodsList from '@/features/payment-methods/PaymentMethodsList/PaymentMethodsList';
|
|
import EmptyPaymentMethods from '@/features/payment-methods/EmptyPaymentMethods/EmptyPaymentMethods';
|
|
import PaymentForm from './PaymentForm/PaymentForm';
|
|
import Loading from '@/components/Loading/Loading';
|
|
import Status from '@/components/Status/Status';
|
|
import type { IPaymentMethod } from '@/features/payment-methods/types';
|
|
import type { IPaymentRequest } from './types';
|
|
import { useCashier } from './context/CashierContext';
|
|
import { getCashierConfig } from '@/config/cashierConfig';
|
|
import { cashierService } from './services/CashierService';
|
|
|
|
function Cashier() {
|
|
const {
|
|
state,
|
|
methods,
|
|
currencies,
|
|
selectedMethod,
|
|
formMetadata,
|
|
error,
|
|
paymentUrl,
|
|
goBack,
|
|
setSelectedMethod,
|
|
initiatePayment,
|
|
} = useCashier();
|
|
|
|
// Redirect to payment URL when state is redirecting
|
|
useEffect(() => {
|
|
if (state === 'redirecting' && paymentUrl) {
|
|
window.location.href = paymentUrl;
|
|
}
|
|
}, [state, paymentUrl]);
|
|
|
|
const handleMethodSelect = (method: IPaymentMethod) => {
|
|
setSelectedMethod(method);
|
|
};
|
|
|
|
const handleFormSubmit = async (formData: Record<string, unknown>) => {
|
|
try {
|
|
// Transform form data to match IPaymentRequest structure
|
|
const additionalFields: Record<string, unknown> = {};
|
|
if (formData.account) {
|
|
additionalFields.account = formData.account as string;
|
|
}
|
|
|
|
// Preserve any additional fields
|
|
Object.entries(formData).forEach(([key, value]) => {
|
|
if (
|
|
!['payment_type', 'method', 'currency', 'amount', 'customer', 'redirect', 'account'].includes(key)
|
|
) {
|
|
additionalFields[key] = value;
|
|
}
|
|
});
|
|
|
|
const paymentRequest: Omit<IPaymentRequest, 'merchant_id'> = {
|
|
payment_type: (formData.payment_type as 'deposit' | 'withdrawal') || 'deposit',
|
|
method: (formData.method as string) || '',
|
|
currency: (formData.currency as string) || '',
|
|
amount: (formData.amount as number) || 0,
|
|
customer: (formData.customer as IPaymentRequest['customer']) || {
|
|
id: '',
|
|
first_name: '',
|
|
last_name: '',
|
|
email: '',
|
|
},
|
|
redirect: formData.redirect as IPaymentRequest['redirect'],
|
|
...additionalFields,
|
|
};
|
|
await initiatePayment(paymentRequest);
|
|
} catch {
|
|
// Error is handled by the service state
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
setSelectedMethod(null);
|
|
};
|
|
|
|
if (state === 'loading') {
|
|
return <Loading />;
|
|
}
|
|
|
|
if (state === 'error' && error) {
|
|
return <Status type="error" message={`Error: ${error.message}`} onAction={()=> goBack()}/>;
|
|
}
|
|
|
|
if (state === 'redirecting') {
|
|
return <div>Redirecting to payment...</div>;
|
|
}
|
|
|
|
if (selectedMethod) {
|
|
return (
|
|
<PaymentForm
|
|
method={selectedMethod}
|
|
currencies={currencies}
|
|
formMetadata={formMetadata}
|
|
config={getCashierConfig()}
|
|
onSubmit={handleFormSubmit}
|
|
onBack={handleBack}
|
|
isLoading={state === 'submitting'}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{state === 'ready' && methods.length === 0 ? (
|
|
<EmptyPaymentMethods />
|
|
) : state === 'ready' ? (
|
|
<PaymentMethodsList methods={methods} onMethodSelect={handleMethodSelect} />
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Cashier;
|