add billable rate restriction for free organizations

resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue

@@ -10,21 +10,27 @@ import {
 } from '@/packages/ui/src/tooltip';
 import { computed, onMounted, ref, watch } from 'vue';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+import { useBillableRatesLock } from '../utils/useBillableRatesLock';
 
 const props = defineProps<{
     currency: string;
     organizationBillableRate: number | null;
 }>();
 
+const { locked: billableRatesLocked } = useBillableRatesLock();
+
 type RateType = 'default-rate' | 'custom-rate';
 
 const billableDefault = ref<'billable' | 'non-billable'>('non-billable');
 const rateType = ref<RateType>('default-rate');
+const originallyBillable = ref(false);
+const billableFlagLocked = computed(() => billableRatesLocked.value && !originallyBillable.value);
 
 const billableRate = defineModel<number | null>('billableRate');
 const isBillable = defineModel<boolean>('isBillable');
 
 onMounted(() => {
+    originallyBillable.value = isBillable.value === true;
     if (isBillable.value === true) {
         billableDefault.value = 'billable';
         rateType.value = billableRate.value ? 'custom-rate' : 'default-rate';
@@ -66,6 +72,9 @@ const displayedRate = computed({
 });
 
 const billableDescription = computed(() => {
+    if (billableFlagLocked.value) {
+        return 'Your organization’s plan does not allow enabling billable projects.';
+    }
     if (billableDefault.value === 'non-billable') {
         return 'New time entries for this project will not be marked billable by default.';
     }
@@ -84,14 +93,19 @@ const emit = defineEmits(['submit']);
             </SelectTrigger>
             <SelectContent>
                 <SelectItem value="non-billable">Non-billable</SelectItem>
-                <SelectItem value="billable">Billable</SelectItem>
+                <SelectItem value="billable" :disabled="billableFlagLocked">Billable</SelectItem>
             </SelectContent>
         </Select>
         <FieldDescription>{{ billableDescription }}</FieldDescription>
     </Field>
     <Field>
         <FieldLabel :icon="BillableIcon" for="billableRateType">Billable Rate</FieldLabel>
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <BillableRateInput
+            v-if="billableRatesLocked"
+            v-model="displayedRate"
+            :currency="currency"
+            name="billableRate" />
+        <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-2">
             <Select v-model="rateType">
                 <SelectTrigger id="billableRateType">
                     <SelectValue />