add billable rate restriction interfaces for billing extension

resources/js/packages/ui/src/Input/BillableRateInput.vue

@@ -8,6 +8,8 @@ import {
     NumberFieldIncrement,
     NumberFieldInput,
 } from '..';
+import UpgradeLockedField from './UpgradeLockedField.vue';
+import { useBillableRatesLock } from '../utils/useBillableRatesLock';
 
 const props = defineProps<{
     name: string;
@@ -20,6 +22,8 @@ const model = defineModel<number | null>({
     default: null,
 });
 
+const { locked } = useBillableRatesLock();
+
 const billableRateInput = ref<HTMLInputElement | null>(null);
 useFocus(billableRateInput, { initialValue: props.focus });
 
@@ -30,7 +34,9 @@ function formatValue(modelValue: number | null) {
 
 <template>
     <div class="relative">
+        <UpgradeLockedField v-if="locked" />
         <NumberField
+            v-else
             :id="name"
             ref="billableRateInput"
             :model-value="formatValue(model)"

resources/js/packages/ui/src/Input/UpgradeLockedField.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { LockClosedIcon } from '@heroicons/vue/20/solid';
+import { useBillableRatesLock } from '../utils/useBillableRatesLock';
+
+const { requestUpgrade } = useBillableRatesLock();
+</script>
+
+<template>
+    <button
+        type="button"
+        data-testid="billable_rates_locked"
+        class="flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input-border bg-input-background px-3 text-left text-sm text-text-tertiary shadow-sm transition hover:border-border-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        @click.prevent.stop="requestUpgrade">
+        <span class="flex min-w-0 items-center gap-2">
+            <LockClosedIcon class="w-3.5 shrink-0 text-icon-default" />
+            <span class="truncate"><slot>Billable rates</slot></span>
+        </span>
+        <span
+            class="shrink-0 rounded border border-border-secondary bg-secondary px-2 py-0.5 text-xs font-semibold text-text-secondary">
+            Upgrade
+        </span>
+    </button>
+</template>

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

@@ -10,12 +10,15 @@ 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');
@@ -91,7 +94,12 @@ const emit = defineEmits(['submit']);
     </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 />

resources/js/packages/ui/src/UpgradeLockedBadge.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { LockClosedIcon } from '@heroicons/vue/20/solid';
+import { useBillableRatesLock } from './utils/useBillableRatesLock';
+
+const { requestUpgrade } = useBillableRatesLock();
+</script>
+
+<template>
+    <button
+        type="button"
+        data-testid="billable_rates_locked_badge"
+        class="inline-flex items-center space-x-1 rounded border border-border-secondary bg-secondary px-2 py-1 hover:border-border-tertiary hover:bg-tertiary"
+        @click.prevent.stop="requestUpgrade">
+        <LockClosedIcon class="w-3 text-text-tertiary"></LockClosedIcon>
+        <span class="text-xs font-semibold text-text-secondary"><slot>Upgrade</slot></span>
+    </button>
+</template>

resources/js/packages/ui/src/index.ts

@@ -21,6 +21,8 @@ export type { CalendarSettings } from './FullCalendar/calendarSettings';
 export type { ActivityPeriod } from './FullCalendar/activityTypes';
 export { cn } from './utils/cn';
 export { useCssVariable } from './utils/useCssVariable';
+export { billableRatesLockKey, useBillableRatesLock } from './utils/useBillableRatesLock';
+export type { BillableRatesLock } from './utils/useBillableRatesLock';
 
 import Badge from './Badge.vue';
 import Button from './Buttons/Button.vue';

resources/js/packages/ui/src/utils/useBillableRatesLock.ts

@@ -0,0 +1,22 @@
+import { computed, inject, type ComputedRef, type InjectionKey } from 'vue';
+
+export interface BillableRatesLock {
+    locked: ComputedRef<boolean>;
+    requestUpgrade: () => void;
+}
+
+export const billableRatesLockKey: InjectionKey<BillableRatesLock> = Symbol('billableRatesLock');
+
+/**
+ * Whether billable rates are locked behind a plan upgrade for the current organization.
+ *
+ * The app layout provides the lock state and opens the upgrade dialog. Without a
+ * provider (e.g. public report views or other consumers of this package) billable
+ * rates count as unlocked.
+ */
+export function useBillableRatesLock(): BillableRatesLock {
+    return inject(billableRatesLockKey, {
+        locked: computed(() => false),
+        requestUpgrade: () => {},
+    });
+}