forked from jamesp/sasa-membership
Square Payments
This commit is contained in:
James Pattinson
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { membershipService, paymentService, MembershipTier, MembershipCreateData, PaymentCreateData } from '../services/membershipService';
|
||||
import SquarePayment from './SquarePayment';
|
||||
|
||||
interface MembershipSetupProps {
|
||||
onMembershipCreated: () => void;
|
||||
@@ -11,7 +12,9 @@ const MembershipSetup: React.FC<MembershipSetupProps> = ({ onMembershipCreated,
|
||||
const [selectedTier, setSelectedTier] = useState<MembershipTier | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [step, setStep] = useState<'select' | 'payment' | 'confirm'>('select');
|
||||
const [paymentMethod, setPaymentMethod] = useState<'square' | 'cash' | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
const [createdMembershipId, setCreatedMembershipId] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadTiers();
|
||||
@@ -32,45 +35,74 @@ const MembershipSetup: React.FC<MembershipSetupProps> = ({ onMembershipCreated,
|
||||
setStep('payment');
|
||||
};
|
||||
|
||||
const handlePayment = async () => {
|
||||
if (!selectedTier) return;
|
||||
const handleCashPayment = async () => {
|
||||
if (!selectedTier || !createdMembershipId) return;
|
||||
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
// Calculate dates (start today, end one year from now)
|
||||
const startDate = new Date().toISOString().split('T')[0];
|
||||
const endDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
|
||||
|
||||
// Create membership
|
||||
const membershipData: MembershipCreateData = {
|
||||
tier_id: selectedTier.id,
|
||||
start_date: startDate,
|
||||
end_date: endDate,
|
||||
auto_renew: false
|
||||
};
|
||||
|
||||
const membership = await membershipService.createMembership(membershipData);
|
||||
|
||||
// Create fake payment
|
||||
// Create cash/dummy payment
|
||||
const paymentData: PaymentCreateData = {
|
||||
amount: selectedTier.annual_fee,
|
||||
payment_method: 'dummy',
|
||||
membership_id: membership.id,
|
||||
notes: `Fake payment for ${selectedTier.name} membership`
|
||||
payment_method: 'cash',
|
||||
membership_id: createdMembershipId,
|
||||
notes: `Cash payment for ${selectedTier.name} membership`
|
||||
};
|
||||
|
||||
await paymentService.createPayment(paymentData);
|
||||
|
||||
setStep('confirm');
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to create membership');
|
||||
setError(err.response?.data?.detail || 'Failed to record payment');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSquarePaymentSuccess = (paymentResult: any) => {
|
||||
console.log('Square payment successful:', paymentResult);
|
||||
// Payment was successful, membership was created and activated by the backend
|
||||
setStep('confirm');
|
||||
};
|
||||
|
||||
const handleSquarePaymentError = (error: string) => {
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handlePaymentMethodSelect = async (method: 'square' | 'cash') => {
|
||||
setPaymentMethod(method);
|
||||
|
||||
if (!selectedTier) return;
|
||||
|
||||
// For cash payments, create membership in PENDING state
|
||||
// For Square payments, we'll create membership only after successful payment
|
||||
if (method === 'cash') {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const startDate = new Date().toISOString().split('T')[0];
|
||||
const endDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
|
||||
|
||||
const membershipData: MembershipCreateData = {
|
||||
tier_id: selectedTier.id,
|
||||
start_date: startDate,
|
||||
end_date: endDate,
|
||||
auto_renew: false
|
||||
};
|
||||
|
||||
const membership = await membershipService.createMembership(membershipData);
|
||||
setCreatedMembershipId(membership.id);
|
||||
setLoading(false);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to create membership');
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
// For Square, just set the payment method - membership created after successful payment
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
onMembershipCreated();
|
||||
};
|
||||
@@ -144,49 +176,159 @@ const MembershipSetup: React.FC<MembershipSetupProps> = ({ onMembershipCreated,
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ backgroundColor: '#fff3cd', border: '1px solid #ffeaa7', borderRadius: '4px', padding: '16px', marginBottom: '20px' }}>
|
||||
<strong>Demo Payment</strong>
|
||||
<p style={{ marginTop: '8px', marginBottom: 0 }}>
|
||||
This is a Cash payment flow for demo purposes. Square / Paypal etc will come soon
|
||||
</p>
|
||||
</div>
|
||||
{!paymentMethod && (
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<h4 style={{ marginBottom: '16px' }}>Choose Payment Method</h4>
|
||||
|
||||
<div style={{ display: 'grid', gap: '12px' }}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => handlePaymentMethodSelect('square')}
|
||||
disabled={loading}
|
||||
style={{
|
||||
padding: '16px',
|
||||
textAlign: 'left',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>Credit/Debit Card</strong>
|
||||
<div style={{ fontSize: '14px', marginTop: '4px', opacity: 0.8 }}>
|
||||
Pay securely with Square
|
||||
</div>
|
||||
</div>
|
||||
<span>→</span>
|
||||
</button>
|
||||
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handlePayment}
|
||||
disabled={loading}
|
||||
style={{ marginRight: '10px' }}
|
||||
>
|
||||
{loading ? 'Processing...' : 'Complete Cash Payment'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setStep('select')}
|
||||
disabled={loading}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => handlePaymentMethodSelect('cash')}
|
||||
disabled={loading}
|
||||
style={{
|
||||
padding: '16px',
|
||||
textAlign: 'left',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>Cash Payment</strong>
|
||||
<div style={{ fontSize: '14px', marginTop: '4px', opacity: 0.8 }}>
|
||||
Pay in person or by check
|
||||
</div>
|
||||
</div>
|
||||
<span>→</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '20px', textAlign: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setStep('select')}
|
||||
disabled={loading}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{paymentMethod === 'square' && selectedTier && (
|
||||
<div>
|
||||
<SquarePayment
|
||||
amount={selectedTier.annual_fee}
|
||||
tierId={selectedTier.id}
|
||||
onPaymentSuccess={handleSquarePaymentSuccess}
|
||||
onPaymentError={handleSquarePaymentError}
|
||||
/>
|
||||
<div style={{ marginTop: '20px', textAlign: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => {
|
||||
setPaymentMethod(null);
|
||||
setError('');
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
Choose Different Payment Method
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{paymentMethod === 'cash' && createdMembershipId && (
|
||||
<div>
|
||||
<div style={{
|
||||
backgroundColor: '#fff3cd',
|
||||
border: '1px solid #ffeaa7',
|
||||
borderRadius: '4px',
|
||||
padding: '16px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<strong>Cash Payment Selected</strong>
|
||||
<p style={{ marginTop: '8px', marginBottom: 0 }}>
|
||||
Your membership will be marked as pending until an administrator confirms payment receipt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleCashPayment}
|
||||
disabled={loading}
|
||||
style={{ marginRight: '10px' }}
|
||||
>
|
||||
{loading ? 'Processing...' : 'Confirm Cash Payment'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => {
|
||||
setPaymentMethod(null);
|
||||
setCreatedMembershipId(null);
|
||||
setError('');
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
Choose Different Payment Method
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (step === 'confirm') {
|
||||
const isCashPayment = paymentMethod === 'cash';
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Membership Created Successfully!</h3>
|
||||
<h3 style={{ marginBottom: '16px' }}>
|
||||
{isCashPayment ? 'Membership Application Submitted!' : 'Payment Successful!'}
|
||||
</h3>
|
||||
|
||||
{selectedTier && (
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<h4>Your Membership Details:</h4>
|
||||
<p><strong>Tier:</strong> {selectedTier.name}</p>
|
||||
<p><strong>Annual Fee:</strong> £{selectedTier.annual_fee.toFixed(2)}</p>
|
||||
<p><strong>Status:</strong> <span className="status-badge status-pending">Pending</span></p>
|
||||
<p><strong>Status:</strong>
|
||||
<span className={`status-badge ${isCashPayment ? 'status-pending' : 'status-active'}`}>
|
||||
{isCashPayment ? 'Pending' : 'Active'}
|
||||
</span>
|
||||
</p>
|
||||
<p style={{ fontSize: '14px', color: '#666', marginTop: '12px' }}>
|
||||
Your membership application has been submitted. An administrator will review and activate your membership shortly.
|
||||
{isCashPayment
|
||||
? 'Your membership application has been submitted. An administrator will review and activate your membership once payment is confirmed.'
|
||||
: 'Thank you for your payment! Your membership has been activated and is now live. You can start enjoying your membership benefits immediately.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user