feat(services): Add deposit percentage option for fixed-price services

- Add deposit_percent field back to Service model for percentage-based deposits
- Reorganize service form: variable pricing toggle at top, deposit toggle with
  amount/percent options (percent only available for fixed pricing)
- Disable price field when variable pricing is enabled
- Add backend validation: variable pricing cannot use percentage deposits
- Update frontend types and hooks to handle deposit_percent field

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

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/hooks/useServices.ts

@@ -26,7 +26,8 @@ export const useServices = () => {
         photos: s.photos || [],
         // Pricing fields
         variable_pricing: s.variable_pricing ?? false,
-        deposit_amount: s.deposit_amount ? parseFloat(s.deposit_amount) : 0,
+        deposit_amount: s.deposit_amount ? parseFloat(s.deposit_amount) : null,
+        deposit_percent: s.deposit_percent ? parseFloat(s.deposit_percent) : null,
         requires_deposit: s.requires_deposit ?? false,
         requires_saved_payment_method: s.requires_saved_payment_method ?? false,
         deposit_display: s.deposit_display || null,
@@ -68,7 +69,8 @@ interface ServiceInput {
   description?: string;
   photos?: string[];
   variable_pricing?: boolean;
-  deposit_amount?: number; // 0 = no deposit
+  deposit_amount?: number | null;
+  deposit_percent?: number | null;
 }
 
 /**
@@ -94,6 +96,9 @@ export const useCreateService = () => {
       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;
@@ -121,6 +126,7 @@ export const useUpdateService = () => {
       // 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;

frontend/src/pages/Services.tsx

@@ -14,7 +14,10 @@ interface ServiceFormData {
   photos: string[];
   // Pricing fields
   variable_pricing: boolean;
-  deposit_amount: number; // 0 = no deposit
+  deposit_enabled: boolean;
+  deposit_type: 'amount' | 'percent';
+  deposit_amount: number | null;
+  deposit_percent: number | null;
 }
 
 const Services: React.FC = () => {
@@ -41,7 +44,10 @@ const Services: React.FC = () => {
     description: '',
     photos: [],
     variable_pricing: false,
-    deposit_amount: 0,
+    deposit_enabled: false,
+    deposit_type: 'amount',
+    deposit_amount: null,
+    deposit_percent: null,
   });
 
   // Photo gallery state
@@ -209,13 +215,21 @@ const Services: React.FC = () => {
       description: '',
       photos: [],
       variable_pricing: false,
-      deposit_amount: 0,
+      deposit_enabled: false,
+      deposit_type: 'amount',
+      deposit_amount: null,
+      deposit_percent: null,
     });
     setIsModalOpen(true);
   };
 
   const openEditModal = (service: Service) => {
     setEditingService(service);
+    // Determine deposit configuration from existing data
+    const hasDeposit = (service.deposit_amount && service.deposit_amount > 0) ||
+                       (service.deposit_percent && service.deposit_percent > 0);
+    const depositType = service.deposit_percent && service.deposit_percent > 0 ? 'percent' : 'amount';
+
     setFormData({
       name: service.name,
       durationMinutes: service.durationMinutes,
@@ -223,7 +237,10 @@ const Services: React.FC = () => {
       description: service.description || '',
       photos: service.photos || [],
       variable_pricing: service.variable_pricing || false,
-      deposit_amount: service.deposit_amount || 0,
+      deposit_enabled: hasDeposit,
+      deposit_type: depositType,
+      deposit_amount: service.deposit_amount || null,
+      deposit_percent: service.deposit_percent || null,
     });
     setIsModalOpen(true);
   };
@@ -236,14 +253,21 @@ const Services: React.FC = () => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    // Build API data based on form state
     const apiData = {
       name: formData.name,
       durationMinutes: formData.durationMinutes,
-      price: formData.price,
+      price: formData.variable_pricing ? 0 : formData.price, // Price is 0 for variable pricing
       description: formData.description,
       photos: formData.photos,
       variable_pricing: formData.variable_pricing,
-      deposit_amount: formData.deposit_amount,
+      // Only send deposit values if deposit is enabled
+      deposit_amount: formData.deposit_enabled && formData.deposit_type === 'amount'
+        ? formData.deposit_amount
+        : null,
+      deposit_percent: formData.deposit_enabled && formData.deposit_type === 'percent'
+        ? formData.deposit_percent
+        : null,
     };
 
     try {
@@ -523,6 +547,40 @@ const Services: React.FC = () => {
 
             <form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden">
               <div className="p-6 space-y-4 overflow-y-auto flex-1">
+                {/* Variable Pricing Toggle - At the top */}
+                <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-700">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <label className="text-sm font-medium text-purple-900 dark:text-purple-100">
+                        {t('services.variablePricing', 'Variable Pricing')}
+                      </label>
+                      <p className="text-xs text-purple-600 dark:text-purple-300 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,
+                        // When enabling variable pricing, switch deposit to amount only
+                        deposit_type: !formData.variable_pricing ? 'amount' : formData.deposit_type,
+                        deposit_percent: !formData.variable_pricing ? null : formData.deposit_percent,
+                      })}
+                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                        formData.variable_pricing ? 'bg-purple-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>
+                </div>
+
+                {/* Name */}
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     {t('services.name', 'Name')} *
@@ -537,6 +595,7 @@ const Services: React.FC = () => {
                   />
                 </div>
 
+                {/* Duration and Price */}
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -554,74 +613,164 @@ 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 ($)')} {formData.variable_pricing ? t('services.estimated', '(Estimated)') : '*'}
+                      {t('services.price', 'Price ($)')} {!formData.variable_pricing && '*'}
                     </label>
                     <input
                       type="number"
-                      value={formData.price}
+                      value={formData.variable_pricing ? '' : formData.price}
                       onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) || 0 })}
                       required={!formData.variable_pricing}
+                      disabled={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"
+                      placeholder={formData.variable_pricing ? t('services.priceNA', 'N/A') : '0.00'}
+                      className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 ${
+                        formData.variable_pricing
+                          ? 'bg-gray-100 dark:bg-gray-900 cursor-not-allowed'
+                          : 'bg-white dark:bg-gray-700'
+                      }`}
                     />
+                    {formData.variable_pricing && (
+                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        {t('services.variablePriceNote', 'Price determined after service')}
+                      </p>
+                    )}
                   </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 */}
+                {/* Deposit Toggle and Configuration */}
                 <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')}
+                        {t('services.requireDeposit', 'Require Deposit')}
                       </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')}
+                        {t('services.depositDescription', 'Collect a deposit when customer books')}
                       </p>
                     </div>
                     <button
                       type="button"
                       onClick={() => setFormData({
                         ...formData,
-                        variable_pricing: !formData.variable_pricing,
+                        deposit_enabled: !formData.deposit_enabled,
+                        deposit_amount: !formData.deposit_enabled ? 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'
+                        formData.deposit_enabled ? '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'
+                          formData.deposit_enabled ? 'translate-x-6' : 'translate-x-1'
                         }`}
                       />
                     </button>
                   </div>
-                  {formData.variable_pricing && (
-                    <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>
+
+                  {/* Deposit Configuration - only shown when enabled */}
+                  {formData.deposit_enabled && (
+                    <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600 space-y-3">
+                      {/* Deposit Type Selection - only show for fixed pricing */}
+                      {!formData.variable_pricing && (
+                        <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,
+                                  deposit_amount: formData.deposit_amount || 50,
+                                })}
+                                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,
+                                  deposit_percent: formData.deposit_percent || 25,
+                                })}
+                                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>
+                      )}
+
+                      {/* Amount Input */}
+                      {(formData.variable_pricing || 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>
+                      )}
+
+                      {/* Percent Input - only for fixed pricing */}
+                      {!formData.variable_pricing && 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.depositCalculated', '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.')}
+                      </p>
+                    </div>
                   )}
                 </div>
 
+                {/* Description */}
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     {t('services.descriptionLabel', 'Description')}

frontend/src/types.ts

@@ -211,8 +211,9 @@ export interface Service {
   is_archived_by_quota?: boolean; // True if archived due to quota overage
   // Pricing fields
   variable_pricing?: boolean; // If true, final price is determined after service completion
-  deposit_amount?: number; // Deposit amount (0 = no deposit required)
-  requires_deposit?: boolean; // True if deposit_amount > 0 (computed)
+  deposit_amount?: number | null; // Fixed deposit amount
+  deposit_percent?: number | null; // Deposit as percentage (only for fixed pricing)
+  requires_deposit?: boolean; // True if deposit configured (computed)
   requires_saved_payment_method?: boolean; // True if deposit > 0 or variable pricing (computed)
   deposit_display?: string | null; // Human-readable deposit description
 }