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

refactor(services): Simplify deposit to single amount field

Browse Source 
- Remove deposit_percent field (doesn't work for variable pricing)
- Make deposit_amount default to 0 (no deposit)
- Deposit now applies to both variable and fixed pricing services
- Add requires_deposit and requires_saved_payment_method as computed properties
- Simplify frontend form with single deposit amount input
- Show deposit badge in service list when deposit > 0

🤖 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:42:46 -05:00
parent 7da5d55831
commit c7308ad167
6 changed files with 92 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/hooks/useServices.ts
View File

@@ -24,10 +24,10 @@ export const useServices = () => {
description: s.description || '',
displayOrder: s.display_order ?? 0,
photos: s.photos || [],
// Variable pricing fields
// Pricing fields
variable_pricing: s.variable_pricing ?? false,
deposit_amount: s.deposit_amount ? parseFloat(s.deposit_amount) : null,
deposit_percent: s.deposit_percent ? parseFloat(s.deposit_percent) : null,
deposit_amount: s.deposit_amount ? parseFloat(s.deposit_amount) : 0,
requires_deposit: s.requires_deposit ?? false,
requires_saved_payment_method: s.requires_saved_payment_method ?? false,
deposit_display: s.deposit_display || null,
}));
@@ -68,8 +68,7 @@ interface ServiceInput {
description?: string;
photos?: string[];
variable_pricing?: boolean;
deposit_amount?: number | null;
deposit_percent?: number | null;
deposit_amount?: number; // 0 = no deposit
}
/**
@@ -88,16 +87,13 @@ export const useCreateService = () => {
photos: serviceData.photos || [],
};
// Add variable pricing fields if enabled
// Add pricing fields
if (serviceData.variable_pricing !== undefined) {
backendData.variable_pricing = serviceData.variable_pricing;
}
if (serviceData.deposit_amount !== undefined) {
backendData.deposit_amount = serviceData.deposit_amount;
}
if (serviceData.deposit_percent !== undefined) {
backendData.deposit_percent = serviceData.deposit_percent;
}
const { data } = await apiClient.post('/services/', backendData);
return data;
@@ -122,10 +118,9 @@ export const useUpdateService = () => {
if (updates.price !== undefined) backendData.price = updates.price.toString();
if (updates.description !== undefined) backendData.description = updates.description;
if (updates.photos !== undefined) backendData.photos = updates.photos;
// Variable pricing fields
// Pricing fields
if (updates.variable_pricing !== undefined) backendData.variable_pricing = updates.variable_pricing;
if (updates.deposit_amount !== undefined) backendData.deposit_amount = updates.deposit_amount;
if (updates.deposit_percent !== undefined) backendData.deposit_percent = updates.deposit_percent;
const { data } = await apiClient.patch(`/services/${id}/`, backendData);
return data;

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

@@ -12,11 +12,9 @@ interface ServiceFormData {
price: number;
description: string;
photos: string[];
// Variable pricing fields
// Pricing fields
variable_pricing: boolean;
deposit_type: 'amount' | 'percent' | null;
deposit_amount: number | null;
deposit_percent: number | null;
deposit_amount: number; // 0 = no deposit
}
const Services: React.FC = () => {
@@ -43,9 +41,7 @@ const Services: React.FC = () => {
description: '',
photos: [],
variable_pricing: false,
deposit_type: null,
deposit_amount: null,
deposit_percent: null,
deposit_amount: 0,
});
// Photo gallery state
@@ -213,20 +209,13 @@ const Services: React.FC = () => {
description: '',
photos: [],
variable_pricing: false,
deposit_type: null,
deposit_amount: null,
deposit_percent: null,
deposit_amount: 0,
});
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,
@@ -234,9 +223,7 @@ const Services: React.FC = () => {
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,
deposit_amount: service.deposit_amount || 0,
});
setIsModalOpen(true);
};
@@ -249,7 +236,6 @@ 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,
@@ -257,8 +243,7 @@ const Services: React.FC = () => {
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,
deposit_amount: formData.deposit_amount,
};
try {
@@ -426,6 +411,11 @@ const Services: React.FC = () => {
{t('services.variablePricingBadge', 'Variable')}
</span>
)}
{service.requires_deposit && (
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-800/50 dark:text-blue-300">
${service.deposit_amount} {t('services.depositBadge', 'deposit')}
</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" />
@@ -578,6 +568,25 @@ const Services: React.FC = () => {
</div>
</div>
{/* Deposit 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) || 0 })}
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"
placeholder="0.00"
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{t('services.depositHint', 'Set to 0 for no deposit. When set, customers must save a payment method to book.')}
</p>
</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">
@@ -594,9 +603,6 @@ const Services: React.FC = () => {
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'
@@ -609,88 +615,10 @@ const Services: React.FC = () => {
/>
</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>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
{t('services.variablePricingNote', 'The price above is shown as an estimate. The final price will be determined and charged after service completion.')}
</p>
)}
</div>

8
frontend/src/types.ts
View File

@@ -209,11 +209,11 @@ 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
// 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_amount?: number; // Deposit amount (0 = no deposit required)
requires_deposit?: boolean; // True if deposit_amount > 0 (computed)
requires_saved_payment_method?: boolean; // True if deposit > 0 or variable pricing (computed)
deposit_display?: string | null; // Human-readable deposit description
}