poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(payments): Add variable pricing with deposit collection

Browse Source 
Services can now have variable pricing where:
- Final price is determined after service completion
- A deposit (fixed amount or percentage) is collected at booking
- Customer's saved payment method is charged for remaining balance

Changes:
- Add variable_pricing, deposit_amount, deposit_percent fields to Service model
- Add service FK and final_price fields to Event model
- Add AWAITING_PAYMENT status to Event
- Add SetFinalPriceView endpoint to charge customer's saved card
- Add EventPricingInfoView endpoint for pricing details
- Update Services page with variable pricing toggle and deposit config
- Show "From $X" and deposit info in customer preview

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-04 13:33:03 -05:00
parent b0512a660c
commit 3bc8167649
7 changed files with 716 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
frontend/src/pages/Services.tsx
View File

@@ -12,6 +12,11 @@ interface ServiceFormData {
price: number;
description: string;
photos: string[];
// Variable pricing fields
variable_pricing: boolean;
deposit_type: 'amount' | 'percent' | null;
deposit_amount: number | null;
deposit_percent: number | null;
}
const Services: React.FC = () => {
@@ -37,6 +42,10 @@ const Services: React.FC = () => {
price: 0,
description: '',
photos: [],
variable_pricing: false,
deposit_type: null,
deposit_amount: null,
deposit_percent: null,
});
// Photo gallery state
@@ -203,18 +212,31 @@ const Services: React.FC = () => {
price: 0,
description: '',
photos: [],
variable_pricing: false,
deposit_type: null,
deposit_amount: null,
deposit_percent: null,
});
setIsModalOpen(true);
};
const openEditModal = (service: Service) => {
setEditingService(service);
// Determine deposit type from existing data
let depositType: 'amount' | 'percent' | null = null;
if (service.deposit_amount) depositType = 'amount';
else if (service.deposit_percent) depositType = 'percent';
setFormData({
name: service.name,
durationMinutes: service.durationMinutes,
price: service.price,
description: service.description || '',
photos: service.photos || [],
variable_pricing: service.variable_pricing || false,
deposit_type: depositType,
deposit_amount: service.deposit_amount || null,
deposit_percent: service.deposit_percent || null,
});
setIsModalOpen(true);
};
@@ -227,14 +249,26 @@ const Services: React.FC = () => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// Prepare data for API - convert deposit_type to actual deposit values
const apiData = {
name: formData.name,
durationMinutes: formData.durationMinutes,
price: formData.price,
description: formData.description,
photos: formData.photos,
variable_pricing: formData.variable_pricing,
deposit_amount: formData.variable_pricing && formData.deposit_type === 'amount' ? formData.deposit_amount : null,
deposit_percent: formData.variable_pricing && formData.deposit_type === 'percent' ? formData.deposit_percent : null,
};
try {
if (editingService) {
await updateService.mutateAsync({
id: editingService.id,
updates: formData,
updates: apiData,
});
} else {
await createService.mutateAsync(formData);
await createService.mutateAsync(apiData);
}
closeModal();
} catch (error) {
@@ -379,8 +413,19 @@ const Services: React.FC = () => {
</span>
<span className="text-gray-600 dark:text-gray-300 flex items-center gap-1">
<DollarSign className="h-3.5 w-3.5" />
${service.price.toFixed(2)}
{service.variable_pricing ? (
<>
{t('services.fromPrice', 'From')} ${service.price.toFixed(2)}
</>
) : (
`$${service.price.toFixed(2)}`
)}
</span>
{service.variable_pricing && (
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-100 text-purple-700 dark:bg-purple-800/50 dark:text-purple-300">
{t('services.variablePricingBadge', 'Variable')}
</span>
)}
{service.photos && service.photos.length > 0 && (
<span className="text-gray-500 dark:text-gray-400 flex items-center gap-1">
<Image className="h-3.5 w-3.5" />
@@ -437,8 +482,17 @@ const Services: React.FC = () => {
{service.durationMinutes} min
</span>
<span className="font-semibold text-brand-600 dark:text-brand-400">
${service.price.toFixed(2)}
{service.variable_pricing ? (
<>From ${service.price.toFixed(2)}</>
) : (
`$${service.price.toFixed(2)}`
)}
</span>
{service.variable_pricing && service.deposit_display && (
<span className="text-xs text-gray-500 dark:text-gray-400">
({service.deposit_display})
</span>
)}
</div>
</div>
<ChevronRight className="h-5 w-5 text-gray-400 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors shrink-0 ml-4" />
@@ -510,13 +564,13 @@ const Services: React.FC = () => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{t('services.price', 'Price ($)')} *
{t('services.price', 'Price ($)')} {formData.variable_pricing ? t('services.estimated', '(Estimated)') : '*'}
</label>
<input
type="number"
value={formData.price}
onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) || 0 })}
required
required={!formData.variable_pricing}
min={0}
step={0.01}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
@@ -524,6 +578,122 @@ const Services: React.FC = () => {
</div>
</div>
{/* Variable Pricing Toggle */}
<div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between">
<div>
<label className="text-sm font-medium text-gray-900 dark:text-white">
{t('services.variablePricing', 'Variable Pricing')}
</label>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
{t('services.variablePricingDescription', 'Final price is determined after service completion')}
</p>
</div>
<button
type="button"
onClick={() => setFormData({
...formData,
variable_pricing: !formData.variable_pricing,
deposit_type: !formData.variable_pricing ? 'amount' : null,
deposit_amount: !formData.variable_pricing ? 50 : null,
deposit_percent: null,
})}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
formData.variable_pricing ? 'bg-brand-600' : 'bg-gray-300 dark:bg-gray-600'
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
formData.variable_pricing ? 'translate-x-6' : 'translate-x-1'
}`}
/>
</button>
</div>
{/* Deposit Configuration */}
{formData.variable_pricing && (
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600 space-y-3">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t('services.depositType', 'Deposit Type')} *
</label>
<div className="flex gap-4">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="deposit_type"
checked={formData.deposit_type === 'amount'}
onChange={() => setFormData({ ...formData, deposit_type: 'amount', deposit_percent: null })}
className="w-4 h-4 text-brand-600 border-gray-300 focus:ring-brand-500"
/>
<span className="text-sm text-gray-700 dark:text-gray-300">
{t('services.fixedAmount', 'Fixed Amount')}
</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="deposit_type"
checked={formData.deposit_type === 'percent'}
onChange={() => setFormData({ ...formData, deposit_type: 'percent', deposit_amount: null })}
className="w-4 h-4 text-brand-600 border-gray-300 focus:ring-brand-500"
/>
<span className="text-sm text-gray-700 dark:text-gray-300">
{t('services.percentage', 'Percentage')}
</span>
</label>
</div>
</div>
{formData.deposit_type === 'amount' && (
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{t('services.depositAmount', 'Deposit Amount ($)')} *
</label>
<input
type="number"
value={formData.deposit_amount || ''}
onChange={(e) => setFormData({ ...formData, deposit_amount: parseFloat(e.target.value) || null })}
required
min={1}
step={0.01}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
placeholder="50.00"
/>
</div>
)}
{formData.deposit_type === 'percent' && (
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{t('services.depositPercent', 'Deposit Percentage (%)')} *
</label>
<input
type="number"
value={formData.deposit_percent || ''}
onChange={(e) => setFormData({ ...formData, deposit_percent: parseFloat(e.target.value) || null })}
required
min={1}
max={100}
step={1}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
placeholder="25"
/>
{formData.deposit_percent && formData.price > 0 && (
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{t('services.depositEstimate', 'Estimated deposit: ${amount}', { amount: ((formData.price * formData.deposit_percent) / 100).toFixed(2) })}
</p>
)}
</div>
)}
<p className="text-xs text-gray-500 dark:text-gray-400">
{t('services.depositNote', 'Customers must save a payment method to book this service. A deposit will be charged at booking, and the remaining balance will be charged after service completion.')}
</p>
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{t('services.descriptionLabel', 'Description')}

6
frontend/src/types.ts
View File

@@ -209,6 +209,12 @@ export interface Service {
photos?: string[];
created_at?: string; // Used for quota overage calculation (oldest archived first)
is_archived_by_quota?: boolean; // True if archived due to quota overage
// Variable pricing fields
variable_pricing?: boolean; // If true, final price is determined after service completion
deposit_amount?: number | null; // Fixed deposit amount
deposit_percent?: number | null; // Deposit as percentage (0-100)
requires_saved_payment_method?: boolean; // If true, customer must have saved card
deposit_display?: string | null; // Human-readable deposit description
}
export interface Metric {