-
- );
+ return (
+
+
+ );
+ }
}
const { total, used } = calculateUsageMetrics({
diff --git a/vite/src/views/products/features/components/CreateFeatureSheet.tsx b/vite/src/views/products/features/components/CreateFeatureSheet.tsx
index fed83c894..469995c00 100644
--- a/vite/src/views/products/features/components/CreateFeatureSheet.tsx
+++ b/vite/src/views/products/features/components/CreateFeatureSheet.tsx
@@ -1,8 +1,7 @@
import {
CreateFeatureSchema,
- type CreditSchemaItem,
- FeatureType,
FeatureUsageType,
+ isAnyCreditSystem,
} from "@autumn/shared";
import type { AxiosError } from "axios";
import { useEffect, useState } from "react";
@@ -23,6 +22,7 @@ import { NewFeatureBehaviour } from "../../plan/components/new-feature/NewFeatur
import { NewFeatureDetails } from "../../plan/components/new-feature/NewFeatureDetails";
import { NewFeatureType } from "../../plan/components/new-feature/NewFeatureType";
import { validateCreditSystem } from "../credit-systems/utils/validateCreditSystem";
+import { buildFeatureMarkupParams } from "../utils/buildFeatureMutationParams";
import { getDefaultFeature } from "../utils/defaultFeature";
function CreateFeatureSheet({
@@ -52,7 +52,7 @@ function CreateFeatureSheet({
const handleCreateFeature = async () => {
// Validate credit system specific fields first
- if (feature.type === FeatureType.CreditSystem) {
+ if (isAnyCreditSystem(feature.type)) {
const validationError = validateCreditSystem(feature);
if (validationError) {
toast.error(validationError);
@@ -77,12 +77,13 @@ function CreateFeatureSheet({
id: feature.id,
type: feature.type,
consumable: feature.config?.usage_type === FeatureUsageType.Single,
- credit_schema: feature.config?.schema?.map(
- (x: CreditSchemaItem) => ({
- metered_feature_id: x.metered_feature_id,
- credit_cost: x.credit_amount,
- }),
- ),
+ ...buildFeatureMarkupParams({
+ type: feature.type,
+ modelMarkups: feature.model_markups ?? undefined,
+ defaultMarkup: feature.config?.default_markup,
+ providerMarkups: feature.config?.provider_markups,
+ schema: feature.config?.schema,
+ }),
event_names: feature.event_names,
},
);
@@ -119,13 +120,6 @@ function CreateFeatureSheet({
return (
+ Default Markup %
+ {
+ const raw = e.target.value;
+ if (raw === "" || /^-?\d*\.?\d*$/.test(raw)) {
+ form.setFieldValue("defaultMarkup", raw === "" ? 0 : Number(raw));
+ }
+ }}
+ placeholder="0"
+ />
+
+
+ {activeProviderKeys.length > 0 && (
+
+ {activeProviderKeys.map((providerKey) => {
+ const provider = providers[providerKey];
+ const modelFullIds = providerGroups[providerKey] ?? [];
+ const providerName =
+ provider?.name ??
+ providerKey.charAt(0).toUpperCase() + providerKey.slice(1);
+
+ return (
+
+ )}
+
+ e.stopPropagation()}
+ >
+
+ Add Provider Override
+
+
+
+
+ Add specific markup overrides for certain providers/models.
+
+
+
+ p.id}
+ getOptionLabel={(p) => p.name}
+ renderValue={() => (
+ Select provider
+ )}
+ placeholder="Select provider"
+ searchable
+ searchPlaceholder="Search providers..."
+ emptyText="No providers available"
+ disabled={isLoading}
+ />
+
+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/AiCreditSchemaTable.tsx b/vite/src/views/products/features/credit-systems/components/AiCreditSchemaTable.tsx
new file mode 100644
index 000000000..6ad09edc1
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/AiCreditSchemaTable.tsx
@@ -0,0 +1,337 @@
+import {
+ joinModelId,
+ type ModelsDevProvider,
+ splitModelId,
+} from "@autumn/shared";
+import type { ColumnDef, Row } from "@tanstack/react-table";
+import { InfoIcon, PlusIcon, X } from "lucide-react";
+import { useMemo } from "react";
+import { Table } from "@/components/general/table";
+import { IconButton } from "@/components/v2/buttons/IconButton";
+import { Input } from "@/components/v2/inputs/Input";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/v2/tooltips/Tooltip";
+import { useProductTable } from "@/views/products/hooks/useProductTable";
+import type { CreditSystemFormInstance } from "../hooks/useCreditSystemForm";
+import { useProviderMarkup } from "../hooks/useProviderMarkup";
+import { addCustomModelMarkup } from "../utils/modelMarkupUtils";
+import { AiModelSelectDropdown } from "./AiModelSelectDropdown";
+import { CustomModelInput } from "./CustomModelInput";
+import { EditableNumberCell } from "./EditableNumberCell";
+
+interface ModelRow {
+ fullId: string;
+ modelKey: string;
+}
+
+function MarkupCell({
+ form,
+ fullId,
+ providerKey,
+}: {
+ form: CreditSystemFormInstance;
+ fullId: string;
+ providerKey: string;
+}) {
+ const { inheritedMarkup } = useProviderMarkup(form, providerKey);
+
+ return (
+ e.stopPropagation()}
+ >
+
+ ),
+ },
+ ],
+ [isCustom, provider, isLoading, providerKey, form],
+ );
+
+ const allModelsUsed =
+ !isCustom && Object.keys(provider.models).length === modelFullIds.length;
+
+ const table = useProductTable({
+ data,
+ columns,
+ options: { getRowId: (row) => row.fullId },
+ });
+
+ return (
+
+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/AiModelSelectDropdown.tsx b/vite/src/views/products/features/credit-systems/components/AiModelSelectDropdown.tsx
new file mode 100644
index 000000000..e333cd314
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/AiModelSelectDropdown.tsx
@@ -0,0 +1,53 @@
+import type { ModelsDevModel, ModelsDevProvider } from "@autumn/shared";
+import { useMemo } from "react";
+import { SearchableSelect } from "@/components/v2/selects/SearchableSelect";
+
+interface AiModelSelectDropdownProps {
+ value: string;
+ onValueChange: (modelKey: string) => void;
+ provider: ModelsDevProvider;
+ isLoading: boolean;
+}
+
+export function AiModelSelectDropdown({
+ value,
+ onValueChange,
+ provider,
+ isLoading,
+}: AiModelSelectDropdownProps) {
+ const models: ModelsDevModel[] = useMemo(
+ () => Object.values(provider.models),
+ [provider],
+ );
+
+ return (
+
+
+ {providerName}
+ {!isCustom && (
+ 
+ )}
+ {isCustom && (
+
+
+
+
+ Use format{" "}
+
+
+ )}
+
+
+
+
+ )}
+ {isCustom && (
+
+ custom/modelId
+ {" "}
+ in API tracking
+
+ {!isCustom && (
+
+
+ Markup %
+ {
+ const raw = e.target.value;
+ if (raw === "" || /^-?\d*\.?\d*$/.test(raw)) {
+ if (raw === "") {
+ setProviderMarkup(providerKey, undefined);
+ } else {
+ const parsed = Number(raw);
+ if (!Number.isNaN(parsed)) {
+ setProviderMarkup(providerKey, parsed);
+ }
+ }
+ }
+ }}
+ placeholder={String(defaultMarkup)}
+ className="w-20"
+ />
+
+ )}
+
+
+
+
+
+
+
+
+ {!allModelsUsed && (
+
+ )}
+
+ e.stopPropagation()}>
+ model.id}
+ getOptionLabel={(model) => model.name}
+ renderValue={(option) =>
+ option ? (
+ {option.name}
+ ) : provider.models[value]?.name ? (
+ {provider.models[value].name}
+ ) : value ? (
+ {value}
+ ) : (
+
+ {isLoading ? "Loading..." : "Select model"}
+
+ )
+ }
+ placeholder={isLoading ? "Loading..." : "Select model"}
+ searchable
+ searchPlaceholder="Search models..."
+ emptyText="No models found"
+ disabled={isLoading}
+ />
+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/ClassicCreditSchema.tsx b/vite/src/views/products/features/credit-systems/components/ClassicCreditSchema.tsx
new file mode 100644
index 000000000..9c2817c2f
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/ClassicCreditSchema.tsx
@@ -0,0 +1,113 @@
+import {
+ type CreditSchemaItem,
+ type Feature,
+ isAiCreditSystem,
+} from "@autumn/shared";
+import { PlusIcon } from "@phosphor-icons/react";
+import { X } from "lucide-react";
+import { IconButton } from "@/components/v2/buttons/IconButton";
+import { FormLabel } from "@/components/v2/form/FormLabel";
+import { Input } from "@/components/v2/inputs/Input";
+import { useCreditSchema } from "../hooks/useCreditSchema";
+import type { CreditSystemFormInstance } from "../hooks/useCreditSystemForm";
+import { FeatureSelectDropdown } from "./FeatureSelectDropdown";
+
+interface ClassicCreditSchemaProps {
+ form: CreditSystemFormInstance;
+}
+
+export function ClassicCreditSchema({ form }: ClassicCreditSchemaProps) {
+ const {
+ schema,
+ schemaKeys,
+ allSchemaCandidateFeatures,
+ handleSchemaChange,
+ addSchemaItem,
+ removeSchemaItem,
+ } = useCreditSchema(form);
+
+ return (
+
+ = allSchemaCandidateFeatures.length}
+ className="w-fit mt-4"
+ icon={
+
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/CreditSystemDetails.tsx b/vite/src/views/products/features/credit-systems/components/CreditSystemDetails.tsx
index b1c834f36..7e273c280 100644
--- a/vite/src/views/products/features/credit-systems/components/CreditSystemDetails.tsx
+++ b/vite/src/views/products/features/credit-systems/components/CreditSystemDetails.tsx
@@ -1,23 +1,17 @@
-import type { CreateFeature } from "@autumn/shared";
+import { useStore } from "@tanstack/react-form";
import { FormLabel } from "@/components/v2/form/FormLabel";
import { Input } from "@/components/v2/inputs/Input";
import { SheetSection } from "@/components/v2/sheets/SharedSheetComponents";
-import { useAutoSlug } from "@/hooks/common/useAutoSlug";
+import { slugify } from "@/utils/formatUtils/formatTextUtils";
+import type { CreditSystemFormInstance } from "../hooks/useCreditSystemForm";
interface CreditSystemDetailsProps {
- creditSystem: CreateFeature;
- setCreditSystem: (creditSystem: CreateFeature) => void;
+ form: CreditSystemFormInstance;
}
-export function CreditSystemDetails({
- creditSystem,
- setCreditSystem,
-}: CreditSystemDetailsProps) {
- const { setSource, setTarget } = useAutoSlug({
- setState: setCreditSystem,
- sourceKey: "name",
- targetKey: "id",
- });
+export function CreditSystemDetails({ form }: CreditSystemDetailsProps) {
+ const name = useStore(form.store, (s) => s.values.name);
+ const id = useStore(form.store, (s) => s.values.id);
return (
+ Feature
+ Credit Cost
+
+
+
+ {schema.map((item: CreditSchemaItem, index: number) => {
+ const availableFeatures = allSchemaCandidateFeatures.filter(
+ (feature: Feature) =>
+ !schema.some(
+ (schemaItem: CreditSchemaItem) =>
+ feature.id !== item.metered_feature_id &&
+ schemaItem.metered_feature_id === feature.id,
+ ),
+ );
+
+ const selectedFeature = allSchemaCandidateFeatures.find(
+ (f: Feature) => f.id === item.metered_feature_id,
+ );
+ const isAiChild = isAiCreditSystem(selectedFeature?.type);
+
+ return (
+
+
+
+
+ handleSchemaChange(index, "metered_feature_id", featureId)
+ }
+ availableFeatures={availableFeatures}
+ allFeatures={allSchemaCandidateFeatures}
+ />
+
+
+ );
+ })}
+
+
+
+
+ handleSchemaChange(index, "credit_amount", e.target.value)
+ }
+ onBlur={(e) =>
+ handleSchemaChange(
+ index,
+ "credit_amount",
+ Number(e.target.value) || 0,
+ )
+ }
+ placeholder="eg. 10"
+ />
+
+ {isAiChild && (
+
+ credits per $1 of AI usage
+
+ )}
+
- ({
- name: "",
- id: "",
- type: FeatureType.CreditSystem,
- config: {
- schema: [
- {
- metered_feature_id: "",
- feature_amount: 1,
- credit_amount: 0,
- },
- ],
- },
- event_names: [],
- });
-
const axiosInstance = useAxiosInstance();
const { refetch } = useFeaturesQuery();
- // Initialize credit system when selectedCreditSystem changes
- useEffect(() => {
- if (open && selectedCreditSystem) {
- setCreditSystem({
- name: selectedCreditSystem.name,
- id: selectedCreditSystem.id,
- type: selectedCreditSystem.type,
- config: selectedCreditSystem.config,
- event_names: selectedCreditSystem.event_names,
- });
- }
- }, [open, selectedCreditSystem]);
+ const form = useCreditSystemForm({
+ feature: open ? selectedCreditSystem : null,
+ onSubmit: async (values) => {
+ if (!selectedCreditSystem) return;
- const handleUpdateCreditSystem = async () => {
- if (!selectedCreditSystem) return;
+ const creditSystem = {
+ name: values.name,
+ id: values.id,
+ type: values.type,
+ config: values.config,
+ event_names: values.event_names,
+ model_markups: values.model_markups,
+ };
- const validationError = validateCreditSystem(creditSystem);
- if (validationError) {
- toast.error(validationError);
- return;
- }
+ const validationError = validateCreditSystem(creditSystem);
+ if (validationError) {
+ toast.error(validationError);
+ return;
+ }
- setLoading(true);
- try {
await FeatureService.updateFeature(
axiosInstance,
selectedCreditSystem.id,
{
- id: creditSystem.id,
- name: creditSystem.name,
- type: creditSystem.type,
- credit_schema: creditSystem.config?.schema?.map(
- (x: CreditSchemaItem) => ({
- metered_feature_id: x.metered_feature_id,
- credit_cost: Number(x.credit_amount),
- }),
- ),
- event_names: creditSystem.event_names,
+ id: values.id,
+ name: values.name,
+ type: values.type,
+ ...buildFeatureMarkupParams({
+ type: values.type,
+ modelMarkups: values.model_markups,
+ defaultMarkup: values.defaultMarkup,
+ providerMarkups: values.provider_markups,
+ schema: values.config?.schema as CreditSchemaItem[] | undefined,
+ }),
+ event_names: values.event_names,
display: undefined,
},
);
await refetch();
toast.success("Credit system updated successfully");
-
- // Call onSuccess with old and new IDs
- if (onSuccess) {
- onSuccess(
- selectedCreditSystem.id,
- creditSystem.id || selectedCreditSystem.id,
- );
- }
-
- setOpen(false);
- } catch (error: unknown) {
- console.log(error);
- toast.error(
- getBackendErr(error as AxiosError, "Failed to update credit system"),
+ onSuccess?.(
+ selectedCreditSystem.id,
+ values.id || selectedCreditSystem.id,
);
- } finally {
- setLoading(false);
- }
- };
+ setOpen(false);
+ },
+ });
- const handleCancel = () => {
- setOpen(false);
- };
+ const isSubmitting = useStore(form.store, (s) => s.isSubmitting);
return (
-
+
setOpen(false)}
singleShortcut="escape"
>
Cancel
+ form.handleSubmit().catch((err: AxiosError) => {
+ toast.error(
+ getBackendErr(err, "Failed to update credit system"),
+ );
+ })
+ }
metaShortcut="enter"
- isLoading={loading}
+ isLoading={isSubmitting}
>
Update credit system
diff --git a/vite/src/views/products/features/credit-systems/hooks/useAiProviders.ts b/vite/src/views/products/features/credit-systems/hooks/useAiProviders.ts
new file mode 100644
index 000000000..8c511fbb6
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/hooks/useAiProviders.ts
@@ -0,0 +1,130 @@
+import {
+ joinModelId,
+ type ModelsDevProvider,
+ splitModelId,
+} from "@autumn/shared";
+import { useStore } from "@tanstack/react-form";
+import { useMemo } from "react";
+import { useModelsDevPricing } from "@/hooks/queries/useAiModelsQuery";
+import { addCustomModelMarkup } from "../utils/modelMarkupUtils";
+import type { CreditSystemFormInstance } from "./useCreditSystemForm";
+
+function groupByProvider(markups: Record) {
+ const groups: Record = {};
+ for (const fullId of Object.keys(markups)) {
+ const { provider } = splitModelId(fullId);
+ if (!provider) continue;
+ const group = groups[provider] ?? [];
+ group.push(fullId);
+ groups[provider] = group;
+ }
+ return groups;
+}
+
+export function useAiProviders(form: CreditSystemFormInstance) {
+ const { providers, isLoading } = useModelsDevPricing();
+ const modelMarkups = useStore(form.store, (s) => s.values.model_markups);
+ const defaultMarkup = useStore(form.store, (s) => s.values.defaultMarkup);
+ const providerMarkups = useStore(
+ form.store,
+ (s) => s.values.provider_markups,
+ );
+
+ const providerGroups = useMemo(
+ () => groupByProvider(modelMarkups),
+ [modelMarkups],
+ );
+ // A provider is "active" if it has model overrides OR a provider-level markup.
+ const activeProviderKeys = useMemo(
+ () =>
+ Array.from(
+ new Set([
+ ...Object.keys(providerGroups),
+ ...Object.keys(providerMarkups),
+ ]),
+ ),
+ [providerGroups, providerMarkups],
+ );
+
+ const availableProviders = useMemo(() => {
+ const filtered = Object.values(providers).filter(
+ (p) => !activeProviderKeys.includes(p.id),
+ );
+ if (!activeProviderKeys.includes("custom")) {
+ filtered.push({
+ id: "custom",
+ name: "Custom",
+ models: {},
+ } as ModelsDevProvider);
+ }
+ return filtered;
+ }, [providers, activeProviderKeys]);
+
+ const addProvider = (providerKey: string) => {
+ form.setFieldValue("model_markups", (prev) => {
+ if (providerKey === "custom") {
+ return addCustomModelMarkup(prev);
+ }
+ const provider = providers[providerKey];
+ if (!provider) return prev;
+ const firstKey = Object.keys(provider.models)[0];
+ if (!firstKey) return prev;
+ return { ...prev, [joinModelId(providerKey, firstKey)]: {} };
+ });
+ };
+
+ const removeKeys = (keys: string[]) =>
+ form.setFieldValue("model_markups", (prev) => {
+ const updated = { ...prev };
+ for (const k of keys) delete updated[k];
+ return updated;
+ });
+
+ const setProviderMarkup = (providerKey: string, value: number | undefined) =>
+ form.setFieldValue("provider_markups", (prev) => {
+ const updated = { ...prev };
+ if (value == null) {
+ delete updated[providerKey];
+ } else {
+ updated[providerKey] = { markup: value };
+ }
+ return updated;
+ });
+
+ // Removes the whole provider section: all its model overrides and its markup.
+ const removeProvider = (providerKey: string) => {
+ form.setFieldValue("model_markups", (prev) => {
+ const updated = { ...prev };
+ for (const k of Object.keys(updated)) {
+ if (splitModelId(k).provider === providerKey) delete updated[k];
+ }
+ return updated;
+ });
+ setProviderMarkup(providerKey, undefined);
+ };
+
+ const renameKey = (oldKey: string, newKey: string) =>
+ form.setFieldValue("model_markups", (prev) => {
+ if (newKey in prev) return prev;
+ const updated = { ...prev };
+ const entry = updated[oldKey];
+ delete updated[oldKey];
+ updated[newKey] = { ...entry };
+ return updated;
+ });
+
+ return {
+ providers,
+ isLoading,
+ defaultMarkup,
+ providerMarkups,
+ providerGroups,
+ activeProviderKeys,
+ availableProviders,
+ addProvider,
+ removeKeys,
+ removeProvider,
+ setProviderMarkup,
+ renameKey,
+ };
+}
diff --git a/vite/src/views/products/features/credit-systems/hooks/useCreditSchema.ts b/vite/src/views/products/features/credit-systems/hooks/useCreditSchema.ts
new file mode 100644
index 000000000..169eb12dd
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/hooks/useCreditSchema.ts
@@ -0,0 +1,70 @@
+import type { CreditSchemaItem, Feature } from "@autumn/shared";
+import { FeatureType, isAiCreditSystem } from "@autumn/shared";
+import { useStore } from "@tanstack/react-form";
+import { useMemo, useRef } from "react";
+import { toast } from "sonner";
+import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
+import type { CreditSystemFormInstance } from "./useCreditSystemForm";
+
+export function useCreditSchema(form: CreditSystemFormInstance) {
+ const { features } = useFeaturesQuery();
+ const config = useStore(form.store, (s) => s.values.config);
+ const schema: CreditSchemaItem[] = config?.schema || [];
+
+ const schemaKeysRef = useRef([]);
+ const schemaKeys = useMemo(() => {
+ const nextKeys = [...schemaKeysRef.current];
+ while (nextKeys.length < schema.length) nextKeys.push(crypto.randomUUID());
+ while (nextKeys.length > schema.length) nextKeys.pop();
+ schemaKeysRef.current = nextKeys;
+ return nextKeys;
+ }, [schema.length]);
+
+ const allSchemaCandidateFeatures = features.filter(
+ (f: Feature) =>
+ f.type === FeatureType.Metered || isAiCreditSystem(f.type),
+ );
+
+ const handleSchemaChange = (
+ index: number,
+ key: keyof CreditSchemaItem,
+ value: string | number,
+ ) => {
+ const newSchema = [...schema];
+ newSchema[index] = { ...newSchema[index], [key]: value };
+ form.setFieldValue("config", { ...config, schema: newSchema });
+ };
+
+ const addSchemaItem = () => {
+ schemaKeysRef.current = [...schemaKeysRef.current, crypto.randomUUID()];
+ form.setFieldValue("config", {
+ ...config,
+ schema: [
+ ...schema,
+ { metered_feature_id: "", feature_amount: 1, credit_amount: 0 },
+ ],
+ });
+ };
+
+ const removeSchemaItem = (index: number) => {
+ if (schema.length === 1) {
+ toast.error("There must be at least one item in the credit system");
+ return;
+ }
+ const nextKeys = [...schemaKeysRef.current];
+ nextKeys.splice(index, 1);
+ schemaKeysRef.current = nextKeys;
+ const newSchema = [...schema];
+ newSchema.splice(index, 1);
+ form.setFieldValue("config", { ...config, schema: newSchema });
+ };
+
+ return {
+ schema,
+ schemaKeys,
+ allSchemaCandidateFeatures,
+ handleSchemaChange,
+ addSchemaItem,
+ removeSchemaItem,
+ };
+}
diff --git a/vite/src/views/products/features/credit-systems/hooks/useCreditSystemForm.ts b/vite/src/views/products/features/credit-systems/hooks/useCreditSystemForm.ts
new file mode 100644
index 000000000..404ab9b67
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/hooks/useCreditSystemForm.ts
@@ -0,0 +1,67 @@
+import type { Feature, ModelMarkups } from "@autumn/shared";
+import { FeatureType } from "@autumn/shared";
+import { useStore } from "@tanstack/react-form";
+import { useEffect, useRef } from "react";
+import { useAppForm } from "@/hooks/form/form";
+
+export interface CreditSystemFormValues {
+ name: string;
+ id: string;
+ type: FeatureType;
+ config: Record;
+ event_names: string[];
+ model_markups: NonNullable;
+ /** Global default markup for the AI credit system (persisted to config.default_markup). */
+ defaultMarkup: number;
+ /** Per-provider default markups (persisted to config.provider_markups). */
+ provider_markups: Record;
+}
+
+export function useCreditSystemForm({
+ feature,
+ onSubmit,
+ onChange,
+}: {
+ feature: Feature | null;
+ onSubmit?: (values: CreditSystemFormValues) => Promise;
+ onChange?: (values: CreditSystemFormValues) => void;
+}) {
+ const form = useAppForm({
+ defaultValues: {
+ name: feature?.name ?? "",
+ id: feature?.id ?? "",
+ type: feature?.type ?? FeatureType.CreditSystem,
+ config: feature?.config ?? {
+ schema: [
+ { metered_feature_id: "", feature_amount: 1, credit_amount: 0 },
+ ],
+ },
+ event_names: feature?.event_names ?? [],
+ model_markups:
+ (feature?.model_markups as CreditSystemFormValues["model_markups"]) ??
+ {},
+ defaultMarkup:
+ (feature?.config?.default_markup as number | undefined) ?? 0,
+ provider_markups:
+ (feature?.config
+ ?.provider_markups as CreditSystemFormValues["provider_markups"]) ??
+ {},
+ } satisfies CreditSystemFormValues,
+ onSubmit: onSubmit ? ({ value }) => onSubmit(value) : undefined,
+ });
+
+ // Form-level `listeners.onChange` only fires when a FieldApi instance is
+ // registered for the changed field (see form-core FormApi.setFieldValue).
+ // None of these fields are mounted via , so we subscribe to the
+ // store directly and push value changes out to the caller.
+ const values = useStore(form.store, (s) => s.values);
+ const onChangeRef = useRef(onChange);
+ onChangeRef.current = onChange;
+ useEffect(() => {
+ onChangeRef.current?.(values);
+ }, [values]);
+
+ return form;
+}
+
+export type CreditSystemFormInstance = ReturnType;
diff --git a/vite/src/views/products/features/credit-systems/hooks/useProviderMarkup.ts b/vite/src/views/products/features/credit-systems/hooks/useProviderMarkup.ts
new file mode 100644
index 000000000..54013bfaf
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/hooks/useProviderMarkup.ts
@@ -0,0 +1,21 @@
+import { resolveInheritedMarkup } from "@autumn/shared";
+import { useStore } from "@tanstack/react-form";
+import type { CreditSystemFormInstance } from "./useCreditSystemForm";
+
+/** Centralizes the default/provider markup store selectors and their inherited-markup resolution for a single provider. */
+export const useProviderMarkup = (
+ form: CreditSystemFormInstance,
+ providerKey: string,
+) => {
+ const defaultMarkup = useStore(form.store, (s) => s.values.defaultMarkup);
+ const providerMarkup = useStore(
+ form.store,
+ (s) => s.values.provider_markups[providerKey]?.markup,
+ );
+ const inheritedMarkup = resolveInheritedMarkup({
+ providerMarkup,
+ defaultMarkup,
+ });
+
+ return { defaultMarkup, providerMarkup, inheritedMarkup };
+};
diff --git a/vite/src/views/products/features/credit-systems/utils/modelMarkupUtils.ts b/vite/src/views/products/features/credit-systems/utils/modelMarkupUtils.ts
new file mode 100644
index 000000000..faf2fb7cd
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/utils/modelMarkupUtils.ts
@@ -0,0 +1,24 @@
+import {
+ CUSTOM_PROVIDER,
+ isCustomModel,
+ joinModelId,
+ type ModelMarkups,
+} from "@autumn/shared";
+
+type ModelMarkupMap = NonNullable;
+
+/** Append a blank custom-model row, choosing the next free `custom/model-N` key. */
+export const addCustomModelMarkup = (prev: ModelMarkupMap): ModelMarkupMap => {
+ const existing = Object.keys(prev).filter((key) => isCustomModel(key));
+ let index = 1;
+ while (existing.includes(joinModelId(CUSTOM_PROVIDER, `model-${index}`))) {
+ index++;
+ }
+ return {
+ ...prev,
+ [joinModelId(CUSTOM_PROVIDER, `model-${index}`)]: {
+ input_cost: 0,
+ output_cost: 0,
+ },
+ };
+};
diff --git a/vite/src/views/products/features/credit-systems/utils/validateCreditSystem.ts b/vite/src/views/products/features/credit-systems/utils/validateCreditSystem.ts
index d470bc254..d45d278b6 100644
--- a/vite/src/views/products/features/credit-systems/utils/validateCreditSystem.ts
+++ b/vite/src/views/products/features/credit-systems/utils/validateCreditSystem.ts
@@ -1,4 +1,9 @@
-import type { CreateFeature } from "@autumn/shared";
+import {
+ type CreateFeature,
+ isAiCreditSystem,
+ isCustomModel,
+ splitModelId,
+} from "@autumn/shared";
export const validateCreditSystem = (
creditSystem: CreateFeature,
@@ -7,16 +12,32 @@ export const validateCreditSystem = (
return "Please fill in all fields";
}
- if (creditSystem.config.schema.length === 0) {
- return "Need at least one metered feature";
+ if (isAiCreditSystem(creditSystem.type)) {
+ // No per-model rows is valid: such systems bill at the base cost,
+ // adjusted by any provider-level or global default markup.
+ for (const [modelId, entry] of Object.entries(
+ creditSystem.model_markups ?? {},
+ )) {
+ if (!modelId) return "Select a model for each row";
+ if (isCustomModel(modelId)) {
+ const { modelKey } = splitModelId(modelId);
+ if (!modelKey) return "Custom model ID cannot be empty";
+ if (entry.input_cost == null || entry.output_cost == null)
+ return "Custom models require input and output costs";
+ }
+ }
+ return null;
+ }
+
+ if (!creditSystem.config?.schema || creditSystem.config.schema.length === 0) {
+ return "Need at least one item in the schema";
}
for (const item of creditSystem.config.schema) {
if (!item.metered_feature_id) {
- return "Select a metered feature";
+ return "Select a feature for each row";
}
-
- if (item.feature_amount <= 0 || item.credit_amount <= 0) {
+ if ((item.credit_amount ?? 0) <= 0) {
return "Credit amount must be greater than 0";
}
}
diff --git a/vite/src/views/products/features/feature-list/CreditListColumns.tsx b/vite/src/views/products/features/feature-list/CreditListColumns.tsx
index b6955c648..0a7abf6a1 100644
--- a/vite/src/views/products/features/feature-list/CreditListColumns.tsx
+++ b/vite/src/views/products/features/feature-list/CreditListColumns.tsx
@@ -1,11 +1,28 @@
-import type { Feature } from "@autumn/shared";
+import {
+ type Feature,
+ isAiCreditSystem,
+ type ModelsDevProvider,
+ splitModelId,
+} from "@autumn/shared";
+import { CoinsIcon, CpuIcon } from "@phosphor-icons/react";
import type { ColumnDef, Row } from "@tanstack/react-table";
import { AdminHover } from "@/components/general/AdminHover";
import { MiniCopyButton } from "@/components/v2/buttons/CopyButton";
import { getFeatureHoverTexts } from "@/views/admin/adminUtils";
import { FeatureListRowToolbar } from "./FeatureListRowToolbar";
-export const createCreditListColumns = (): ColumnDef[] => [
+function resolveModelName(
+ fullId: string,
+ providers: Record,
+): string {
+ const { provider, modelKey } = splitModelId(fullId);
+ if (!provider) return fullId;
+ return providers[provider]?.models[modelKey]?.name ?? fullId;
+}
+
+export const createCreditListColumns = (
+ providers: Record,
+): ColumnDef[] => [
{
size: 150,
header: "Name",
@@ -37,21 +54,53 @@ export const createCreditListColumns = (): ColumnDef[] => [
);
},
},
+ {
+ header: "Type",
+ size: 160,
+ accessorKey: "type",
+ cell: ({ row }: { row: Row }) => {
+ const isAi = isAiCreditSystem(row.original.type);
+ return (
+ }) => {
const creditSystem = row.original;
+ const modelMarkupEntries = creditSystem.model_markups
+ ? Object.entries(creditSystem.model_markups)
+ : null;
const featureIds =
- creditSystem.config?.schema
- ?.map(
- (schema: { metered_feature_id: string }) =>
- schema.metered_feature_id,
- )
- .join(", ") || "—";
+ modelMarkupEntries && modelMarkupEntries.length > 0
+ ? modelMarkupEntries
+ .map(([fullId]) => resolveModelName(fullId, providers))
+ .join(", ")
+ : creditSystem.config?.schema
+ ?.map(
+ (schema: { metered_feature_id: string }) =>
+ schema.metered_feature_id,
+ )
+ .join(", ") || "—";
return (
- (null);
const [updateFeatureOpen, setUpdateFeatureOpen] = useState(false);
@@ -28,14 +30,14 @@ export function FeatureListTable() {
// Filter features and credit systems based on archived state
const { regularFeatures, creditSystems, hasEventNames } = useMemo(() => {
const regularFeatures = features?.filter((feature) => {
- if (feature.type === FeatureType.CreditSystem) return false;
+ if (isAnyCreditSystem(feature.type)) return false;
return queryStates.showArchivedFeatures
? feature.archived
: !feature.archived;
});
const creditSystems = features?.filter((feature) => {
- if (feature.type !== FeatureType.CreditSystem) return false;
+ if (!isAnyCreditSystem(feature.type)) return false;
return queryStates.showArchivedFeatures
? feature.archived
: !feature.archived;
@@ -52,7 +54,10 @@ export function FeatureListTable() {
() => createFeatureListColumns({ showEventNames: hasEventNames }),
[hasEventNames],
);
- const creditColumns = useMemo(() => createCreditListColumns(), []);
+ const creditColumns = useMemo(
+ () => createCreditListColumns(providers),
+ [providers],
+ );
const featureTable = useProductTable({
data: regularFeatures || [],
diff --git a/vite/src/views/products/features/utils/buildFeatureMutationParams.ts b/vite/src/views/products/features/utils/buildFeatureMutationParams.ts
new file mode 100644
index 000000000..6a1e6a89e
--- /dev/null
+++ b/vite/src/views/products/features/utils/buildFeatureMutationParams.ts
@@ -0,0 +1,49 @@
+import {
+ type CreditSchemaItem,
+ type FeatureType,
+ isAiCreditSystem,
+ type ModelMarkups,
+ type ProviderMarkups,
+} from "@autumn/shared";
+
+interface BuildFeatureMarkupParamsArgs {
+ type: FeatureType;
+ modelMarkups?: ModelMarkups;
+ defaultMarkup?: number | null;
+ providerMarkups?: ProviderMarkups;
+ schema?: CreditSchemaItem[];
+}
+
+interface FeatureMarkupParams {
+ model_markups?: ModelMarkups;
+ default_markup?: number | null;
+ provider_markups?: ProviderMarkups;
+ credit_schema?: { metered_feature_id: string; credit_cost: number }[];
+}
+
+/**
+ * Centralizes the AI-vs-classic credit system field selection shared by the
+ * feature mutation sheets. AI credit systems carry markup fields and omit the
+ * credit schema; classic credit systems do the inverse.
+ */
+export const buildFeatureMarkupParams = ({
+ type,
+ modelMarkups,
+ defaultMarkup,
+ providerMarkups,
+ schema,
+}: BuildFeatureMarkupParamsArgs): FeatureMarkupParams => {
+ const ai = isAiCreditSystem(type);
+ return {
+ model_markups: ai ? modelMarkups : undefined,
+ default_markup: ai ? defaultMarkup : undefined,
+ provider_markups: ai ? providerMarkups : undefined,
+ credit_schema: ai
+ ? undefined
+ : schema?.map((item) => ({
+ metered_feature_id: item.metered_feature_id,
+ credit_cost:
+ item.credit_amount != null ? Number(item.credit_amount) : 0,
+ })),
+ };
+};
diff --git a/vite/src/views/products/features/utils/getFeatureIcon.tsx b/vite/src/views/products/features/utils/getFeatureIcon.tsx
index 264e4c86c..f1d958cde 100644
--- a/vite/src/views/products/features/utils/getFeatureIcon.tsx
+++ b/vite/src/views/products/features/utils/getFeatureIcon.tsx
@@ -2,11 +2,13 @@ import type { Feature, ProductItem } from "@autumn/shared";
import {
FeatureType,
FeatureUsageType,
+ isAiCreditSystem,
ProductItemFeatureType,
} from "@autumn/shared";
import {
BatteryHighIcon,
CoinsIcon,
+ CpuIcon,
TicketIcon,
ToggleRightIcon,
} from "@phosphor-icons/react";
@@ -68,6 +70,15 @@ export const getFeatureIconConfig = (
};
}
+ // Handle AI credit system
+ if (isAiCreditSystem(typeStr) || typeStr === "ai_credit_system") {
+ return {
+ icon:
- Metered Feature
- Credit Cost
-
+
+ {!disableModeSwitch && (
+ = allMeteredFeatures.length}
- className="w-fit mt-4"
- icon={
+ {mode === "classic" ? (
+
);
diff --git a/vite/src/views/products/features/credit-systems/components/CustomModelInput.tsx b/vite/src/views/products/features/credit-systems/components/CustomModelInput.tsx
new file mode 100644
index 000000000..968abfb4e
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/CustomModelInput.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { Input } from "@/components/v2/inputs/Input";
+
+interface CustomModelInputProps {
+ modelKey: string;
+ onRename: (newKey: string) => void;
+}
+
+export function CustomModelInput({ modelKey, onRename }: CustomModelInputProps) {
+ const [local, setLocal] = useState(modelKey);
+ return (
+ setLocal(e.target.value)}
+ onBlur={() => {
+ if (local !== modelKey) onRename(local);
+ }}
+ placeholder="my-model-id"
+ className="text-sm"
+ />
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/EditableNumberCell.tsx b/vite/src/views/products/features/credit-systems/components/EditableNumberCell.tsx
new file mode 100644
index 000000000..d949b212e
--- /dev/null
+++ b/vite/src/views/products/features/credit-systems/components/EditableNumberCell.tsx
@@ -0,0 +1,81 @@
+import { useStore } from "@tanstack/react-form";
+import { useState } from "react";
+import { Input } from "@/components/v2/inputs/Input";
+import type { CreditSystemFormInstance } from "../hooks/useCreditSystemForm";
+
+interface EditableNumberCellProps {
+ form: CreditSystemFormInstance;
+ fullId: string;
+ field: "markup" | "input_cost" | "output_cost";
+ useDefaultAsPlaceholder?: boolean;
+ /** Effective inherited markup (provider default, else global default) shown as the placeholder. */
+ inheritedPlaceholder?: number;
+ allowUndefined?: boolean;
+}
+
+export function EditableNumberCell({
+ form,
+ fullId,
+ field,
+ useDefaultAsPlaceholder = false,
+ inheritedPlaceholder = 0,
+ allowUndefined = false,
+}: EditableNumberCellProps) {
+ const currentValue = useStore(
+ form.store,
+ (s) => s.values.model_markups[fullId]?.[field],
+ );
+ const placeholder = useDefaultAsPlaceholder
+ ? String(inheritedPlaceholder)
+ : "0";
+ const [local, setLocal] = useState("");
+ const [focused, setFocused] = useState(false);
+
+ const hasValue = currentValue != null;
+ const displayed = focused ? local : hasValue ? String(currentValue) : "";
+
+ return (
+ {
+ const raw = e.target.value;
+ if (raw === "" || /^-?\d*\.?\d*$/.test(raw)) {
+ setLocal(raw);
+ if (raw === "" && allowUndefined) {
+ form.setFieldValue("model_markups", (prev) => {
+ const entry = { ...prev[fullId] };
+ delete entry[field];
+ return { ...prev, [fullId]: entry };
+ });
+ } else if (raw !== "") {
+ const parsed = Number(raw);
+ if (!Number.isNaN(parsed)) {
+ form.setFieldValue("model_markups", (prev) => ({
+ ...prev,
+ [fullId]: { ...prev[fullId], [field]: parsed },
+ }));
+ }
+ }
+ }
+ }}
+ onFocus={() => {
+ setLocal(hasValue ? String(currentValue) : "");
+ setFocused(true);
+ }}
+ onBlur={() => {
+ setFocused(false);
+ if (local === "" && !allowUndefined) {
+ form.setFieldValue("model_markups", (prev) => ({
+ ...prev,
+ [fullId]: { ...prev[fullId], [field]: 0 },
+ }));
+ }
+ }}
+ placeholder={placeholder}
+ className="text-sm"
+ />
+ );
+}
diff --git a/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx b/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx
index 16d280699..a81747c4f 100644
--- a/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx
+++ b/vite/src/views/products/features/credit-systems/components/UpdateCreditSystemSheet.tsx
@@ -1,7 +1,6 @@
-import type { CreateFeature, CreditSchemaItem, Feature } from "@autumn/shared";
-import { FeatureType } from "@autumn/shared";
+import type { CreditSchemaItem, Feature } from "@autumn/shared";
+import { useStore } from "@tanstack/react-form";
import type { AxiosError } from "axios";
-import { useEffect, useState } from "react";
import { toast } from "sonner";
import { ShortcutButton } from "@/components/v2/buttons/ShortcutButton";
import {
@@ -13,6 +12,8 @@ import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
import { FeatureService } from "@/services/FeatureService";
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { getBackendErr } from "@/utils/genUtils";
+import { buildFeatureMarkupParams } from "../../utils/buildFeatureMutationParams";
+import { useCreditSystemForm } from "../hooks/useCreditSystemForm";
import { validateCreditSystem } from "../utils/validateCreditSystem";
import { CreditSystemDetails } from "./CreditSystemDetails";
import { CreditSystemSchema } from "./CreditSystemSchema";
@@ -30,127 +31,96 @@ function UpdateCreditSystemSheet({
selectedCreditSystem,
onSuccess,
}: UpdateCreditSystemSheetProps) {
- const [loading, setLoading] = useState(false);
- const [creditSystem, setCreditSystem] = useState
- {schema.map((item: CreditSchemaItem, index: number) => {
- const availableFeatures = allMeteredFeatures.filter(
- (feature: Feature) =>
- !schema.some(
- (schemaItem: CreditSchemaItem) =>
- feature.id !== item.metered_feature_id &&
- schemaItem.metered_feature_id === feature.id,
- ),
- );
-
- return (
-
-
-
-
- handleSchemaChange(index, "metered_feature_id", featureId)
- }
- availableFeatures={availableFeatures}
- allFeatures={allMeteredFeatures}
- />
-
-
- );
- })}
-
-
- handleSchemaChange(index, "credit_amount", e.target.value)
- }
- onBlur={(e) =>
- handleSchemaChange(
- index,
- "credit_amount",
- Number(e.target.value) || 0,
- )
- }
- placeholder="eg. 10"
- />
-
-
-
+ {isAi ? (
+ <>
+
+ );
+ },
+ },
{
header: "Features",
- size: 250,
+ size: 200,
accessorKey: "features",
cell: ({ row }: { row: Row{featureIds}
+
+ {featureIds}
+
);
},
},
diff --git a/vite/src/views/products/features/feature-list/FeatureListTable.tsx b/vite/src/views/products/features/feature-list/FeatureListTable.tsx
index a9aca0662..8d65826a6 100644
--- a/vite/src/views/products/features/feature-list/FeatureListTable.tsx
+++ b/vite/src/views/products/features/feature-list/FeatureListTable.tsx
@@ -1,9 +1,10 @@
-import { AppEnv, type Feature, FeatureType } from "@autumn/shared";
+import { AppEnv, type Feature, isAnyCreditSystem } from "@autumn/shared";
import { ArrowSquareOutIcon, CoinsIcon, LegoIcon } from "@phosphor-icons/react";
import { useMemo, useState } from "react";
import { Table } from "@/components/general/table";
import { IconButton } from "@/components/v2/buttons/IconButton";
import { EmptyState } from "@/components/v2/empty-states/EmptyState";
+import { useModelsDevPricing } from "@/hooks/queries/useAiModelsQuery";
import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
import { useEnv } from "@/utils/envUtils";
import { useProductsQueryState } from "@/views/products/hooks/useProductsQueryState";
@@ -18,6 +19,7 @@ import { FeatureListMenuButton } from "./FeatureListMenuButton";
export function FeatureListTable() {
const env = useEnv();
const { features } = useFeaturesQuery();
+ const { providers } = useModelsDevPricing();
const { queryStates } = useProductsQueryState();
const [selectedFeature, setSelectedFeature] = useStateIncluded
- {isConsumable
+ {isAiCreditSystem(feature?.type)
+ ? "Set an included USD budget (eg, $10 per month)."
+ : isConsumable
? `Set an included usage limit (eg, 100 ${featureName} per month).`
: isAllocated
? `Set a usage limit (eg, 5 ${featureName}).`
@@ -124,7 +127,9 @@ export function BillingType() {
Priced
- {isConsumable
+ {isAiCreditSystem(feature?.type)
+ ? "Bill model usage at the markup you set in USD after the included budget is used."
+ : isConsumable
? `Charge a price for usage (eg, $0.05 per ${singleFeatureName}).`
: isAllocated
? `Charge a price based on usage (eg, $10 per ${singleFeatureName}).`
diff --git a/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx b/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx
index d3982aaf8..135ef106e 100644
--- a/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx
+++ b/vite/src/views/products/plan/components/edit-plan-feature/EditPlanFeatureSheet.tsx
@@ -1,4 +1,4 @@
-import { FeatureType, TierBehavior } from "@autumn/shared";
+import { FeatureType, isAiCreditSystem, TierBehavior } from "@autumn/shared";
import { PencilSimpleIcon } from "@phosphor-icons/react";
import { useState } from "react";
import { IconButton } from "@/components/v2/buttons/IconButton";
@@ -170,7 +170,7 @@ export function EditPlanFeatureSheet({
1 ? (
diff --git a/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx b/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx
index ecf356ad5..16ece32b8 100644
--- a/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx
+++ b/vite/src/views/products/plan/components/edit-plan-feature/IncludedUsage.tsx
@@ -5,11 +5,17 @@ import {
entToItemInterval,
getFeatureName,
Infinite,
+ isAiCreditSystem,
isContUseItem,
} from "@autumn/shared";
import { InfinityIcon } from "@phosphor-icons/react";
import { IconCheckbox } from "@/components/v2/checkboxes/IconCheckbox";
import { Input } from "@/components/v2/inputs/Input";
+import {
+ InputGroup,
+ InputGroupInput,
+ InputGroupText,
+} from "@/components/v2/inputs/InputGroup";
import { useFeaturesQuery } from "@/hooks/queries/useFeaturesQuery";
import { isFeaturePriceItem } from "@/utils/product/getItemType";
import { useProductItemContext } from "@/views/products/product/product-item/ProductItemContext";
@@ -24,6 +30,7 @@ export function IncludedUsage() {
const includedUsage = item.included_usage;
const isFeaturePrice = isFeaturePriceItem(item);
+ const feature = features.find((f) => f.id === item.feature_id);
// Helper function to get the display value for the input
const getInputValue = () => {
@@ -41,35 +48,67 @@ export function IncludedUsage() {
- Quantity of
-
- {getFeatureName({
- feature: features.find((f) => f.id === item.feature_id),
- plural: true,
- })}{" "}
-
- {!isFeaturePrice ? " that can be used" : " granted before billing"}
+ {isAiCreditSystem(feature?.type) ? (
+ `USD budget ${isFeaturePrice ? "granted before billing" : "allocated to this plan"}`
+ ) : (
+ <>
+ Quantity of
+
+ {getFeatureName({ feature, plural: true })}
+
+ {isFeaturePrice
+ ? " granted before billing"
+ : " that can be used"}
+
+ )}
- {
- const value = e.target.value.trim();
-
- if (value === "") {
- setItem({ ...item, included_usage: null });
- } else {
- const numValue = value;
- if (!Number.isNaN(numValue)) {
- setItem({ ...item, included_usage: Number(numValue) });
+ {isAiCreditSystem(feature?.type) ? (
+
+ $
+
+ ) : (
+ {
+ const value = e.target.value.trim();
+
+ if (value === "") {
+ setItem({ ...item, included_usage: null });
+ } else {
+ const numValue = Number(value);
+ if (!Number.isNaN(numValue)) {
+ setItem({ ...item, included_usage: numValue });
+ }
+ }
+ }}
+ disabled={includedUsage === Infinite}
+ type="number"
+ />
+ )}
{
setFeature({
...feature,
diff --git a/vite/src/views/products/plan/components/plan-card/DummyPlanFeatureRow.tsx b/vite/src/views/products/plan/components/plan-card/DummyPlanFeatureRow.tsx
index 13a045e96..78e184def 100644
--- a/vite/src/views/products/plan/components/plan-card/DummyPlanFeatureRow.tsx
+++ b/vite/src/views/products/plan/components/plan-card/DummyPlanFeatureRow.tsx
@@ -1,4 +1,4 @@
-import { FeatureType, FeatureUsageType } from "@autumn/shared";
+import { FeatureType, FeatureUsageType, isAiCreditSystem } from "@autumn/shared";
import { BoxArrowDownIcon } from "@phosphor-icons/react";
import { useFeatureStore } from "@/hooks/stores/useFeatureStore";
import { cn } from "@/lib/utils";
@@ -48,6 +48,10 @@ export const DummyPlanFeatureRow = () => {
const getDisplayText = () => {
const name = hasName ? featureName : getPlaceholderName();
+ if (isAiCreditSystem(feature.type)) {
+ return { primary: `$10.00 of ${name}`, secondary: "" };
+ }
+
if (featureType === FeatureType.CreditSystem) {
return { primary: `100 ${name}`, secondary: "" };
}
diff --git a/vite/src/views/products/plan/components/plan-card/PlanFeatureRow.tsx b/vite/src/views/products/plan/components/plan-card/PlanFeatureRow.tsx
index f718e1ea7..a61e44c65 100644
--- a/vite/src/views/products/plan/components/plan-card/PlanFeatureRow.tsx
+++ b/vite/src/views/products/plan/components/plan-card/PlanFeatureRow.tsx
@@ -1,6 +1,6 @@
/** biome-ignore-all lint/a11y/noStaticElementInteractions: needed */
/** biome-ignore-all lint/a11y/useSemanticElements: needed */
-import type { ProductItem } from "@autumn/shared";
+import { type ProductItem, isAiCreditSystem } from "@autumn/shared";
import { getProductItemDisplay } from "@autumn/shared";
import { TrashIcon } from "@phosphor-icons/react";
import { useEffect, useRef, useState } from "react";
@@ -68,6 +68,7 @@ export const PlanFeatureRow = ({
const feature = features.find((f) => f.id === item.feature_id);
const hasFeatureName = feature?.name && feature.name.trim() !== "";
+
const displayText = hasFeatureName
? display.primary_text
: "Name your feature";
@@ -206,7 +207,9 @@ export const PlanFeatureRow = ({
{displayText}
- {display.secondary_text}
+ {!isAiCreditSystem(feature?.type) && display.secondary_text && (
+ {display.secondary_text}
+ )}