+ {/* Variable Pricing Toggle - At the top */}
+
+
+
+
+
+ {t('services.variablePricingDescription', 'Final price is determined after service completion')}
+
+
+
+
+
+
+ {/* Name */}
+ {/* Duration and Price */}
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 && (
+
+ {t('services.variablePriceNote', 'Price determined after service')}
+
+ )}
- {/* Deposit Amount */}
-
-
-
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"
- />
-
- {t('services.depositHint', 'Set to 0 for no deposit. When set, customers must save a payment method to book.')}
-
-
-
- {/* Variable Pricing Toggle */}
+ {/* Deposit Toggle and Configuration */}
- {t('services.variablePricingDescription', 'Final price is determined after service completion')}
+ {t('services.depositDescription', 'Collect a deposit when customer books')}
- {formData.variable_pricing && (
-
- {t('services.variablePricingNote', 'The price above is shown as an estimate. The final price will be determined and charged after service completion.')}
-
+
+ {/* Deposit Configuration - only shown when enabled */}
+ {formData.deposit_enabled && (
+
+ {/* Deposit Type Selection - only show for fixed pricing */}
+ {!formData.variable_pricing && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Amount Input */}
+ {(formData.variable_pricing || formData.deposit_type === 'amount') && (
+
+
+ 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"
+ />
+
+ )}
+
+ {/* Percent Input - only for fixed pricing */}
+ {!formData.variable_pricing && formData.deposit_type === 'percent' && (
+
+
+
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 && (
+
+ {t('services.depositCalculated', 'Deposit: ${amount}', {
+ amount: ((formData.price * formData.deposit_percent) / 100).toFixed(2)
+ })}
+
+ )}
+
+ )}
+
+
+ {t('services.depositNote', 'Customers must save a payment method to book this service.')}
+
+
)}
+ {/* Description */}