feat(editor): Add free AI credits CTA

packages/editor-ui/src/Interface.ts

@@ -364,6 +364,7 @@ export interface ICredentialsResponse extends ICredentialsEncrypted {
 	currentUserHasAccess?: boolean;
 	scopes?: Scope[];
 	ownedBy?: Pick<IUserResponse, 'id' | 'firstName' | 'lastName' | 'email'>;
+	isManaged: boolean;
 }
 
 export interface ICredentialsBase {

packages/editor-ui/src/__tests__/server/factories/credential.ts

@@ -18,4 +18,7 @@ export const credentialFactory = Factory.extend<ICredentialsResponse>({
 	updatedAt() {
 		return '';
 	},
+	isManaged() {
+		return false;
+	},
 });

packages/editor-ui/src/components/CredentialCard.test.ts

@@ -17,6 +17,7 @@ const createCredential = (overrides = {}): ICredentialsResponse => ({
 	type: '',
 	name: '',
 	sharedWithProjects: [],
+	isManaged: false,
 	homeProject: {} as ProjectSharingData,
 	...overrides,
 });

packages/editor-ui/src/components/CredentialCard.vue

@@ -39,6 +39,7 @@ const props = withDefaults(
 			name: '',
 			sharedWithProjects: [],
 			homeProject: {} as ProjectSharingData,
+			isManaged: false,
 		}),
 		readOnly: false,
 	},

packages/editor-ui/src/components/CredentialConfig.test.ts

@@ -0,0 +1,56 @@
+import CredentialConfig from './CredentialEdit/CredentialConfig.vue';
+import { screen } from '@testing-library/vue';
+import type { ICredentialDataDecryptedObject, ICredentialType } from 'n8n-workflow';
+import { createTestingPinia } from '@pinia/testing';
+import type { RenderOptions } from '@/__tests__/render';
+import { createComponentRenderer } from '@/__tests__/render';
+import { STORES } from '@/constants';
+
+const defaultRenderOptions: RenderOptions = {
+	pinia: createTestingPinia({
+		initialState: {
+			[STORES.SETTINGS]: {
+				settings: {
+					enterprise: {
+						sharing: false,
+						externalSecrets: false,
+					},
+				},
+			},
+		},
+	}),
+	props: {
+		isManaged: true,
+		mode: 'edit',
+		credentialType: {} as ICredentialType,
+		credentialProperties: [],
+		credentialData: {} as ICredentialDataDecryptedObject,
+		credentialPermissions: {
+			share: false,
+			move: false,
+			create: false,
+			read: false,
+			update: false,
+			delete: false,
+			list: false,
+		},
+	},
+};
+
+const renderComponent = createComponentRenderer(CredentialConfig, defaultRenderOptions);
+
+describe('CredentialConfig', () => {
+	it('should display a warning when isManaged is true', async () => {
+		renderComponent();
+		expect(
+			screen.queryByText('This is a managed credential and cannot be edited.'),
+		).toBeInTheDocument();
+	});
+
+	it('should not display a warning when isManaged is false', async () => {
+		renderComponent({ props: { isManaged: false } }, { merge: true });
+		expect(
+			screen.queryByText('This is a managed credential and cannot be edited.'),
+		).not.toBeInTheDocument();
+	});
+});

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -55,6 +55,7 @@ type Props = {
 	isRetesting?: boolean;
 	requiredPropertiesFilled?: boolean;
 	showAuthTypeSelector?: boolean;
+	isManaged?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -235,7 +236,10 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 </script>
 
 <template>
-	<div>
+	<n8n-callout v-if="isManaged" theme="warning" icon="exclamation-triangle">
+		{{ i18n.baseText('freeAi.credits.credentials.edit') }}
+	</n8n-callout>
+	<div v-else>
 		<div :class="$style.config" data-test-id="node-credentials-config-container">
 			<Banner
 				v-show="showValidationWarning"

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -160,6 +160,11 @@ const credentialTypeName = computed(() => {
 	return `${props.activeId}`;
 });
 
+const isEditingManagedCredential = computed(() => {
+	if (!props.activeId) return false;
+	return credentialsStore.getCredentialById(props.activeId)?.isManaged ?? false;
+});
+
 const isCredentialTestable = computed(() => {
 	if (isOAuthType.value || !requiredPropertiesFilled.value) {
 		return false;
@@ -597,6 +602,10 @@ function scrollToBottom() {
 }
 
 async function retestCredential() {
+	if (isEditingManagedCredential.value) {
+		return;
+	}
+
 	if (!isCredentialTestable.value || !credentialTypeName.value) {
 		authError.value = '';
 		testedSuccessfully.value = false;
@@ -1061,7 +1070,9 @@ function resetCredentialData(): void {
 					<InlineNameEdit
 						:model-value="credentialName"
 						:subtitle="credentialType ? credentialType.displayName : ''"
-						:readonly="!credentialPermissions.update || !credentialType"
+						:readonly="
+							!credentialPermissions.update || !credentialType || isEditingManagedCredential
+						"
 						type="Credential"
 						data-test-id="credential-name"
 						@update:model-value="onNameEdit"
@@ -1113,6 +1124,7 @@ function resetCredentialData(): void {
 						:credential-properties="credentialProperties"
 						:credential-data="credentialData"
 						:credential-id="credentialId"
+						:is-managed="isEditingManagedCredential"
 						:show-validation-warning="showValidationWarning"
 						:auth-error="authError"
 						:tested-successfully="testedSuccessfully"

packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts

@@ -0,0 +1,185 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, screen } from '@testing-library/vue';
+import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useNDVStore } from '@/stores/ndv.store';
+import { usePostHog } from '@/stores/posthog.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import { useRootStore } from '@/stores/root.store';
+import { useToast } from '@/composables/useToast';
+import { renderComponent } from '@/__tests__/render';
+import { mockedStore } from '@/__tests__/utils';
+
+vi.mock('@/composables/useToast', () => ({
+	useToast: vi.fn(),
+}));
+
+vi.mock('@/stores/settings.store', () => ({
+	useSettingsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/credentials.store', () => ({
+	useCredentialsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/users.store', () => ({
+	useUsersStore: vi.fn(),
+}));
+
+vi.mock('@/stores/ndv.store', () => ({
+	useNDVStore: vi.fn(),
+}));
+
+vi.mock('@/stores/posthog.store', () => ({
+	usePostHog: vi.fn(),
+}));
+
+vi.mock('@/stores/projects.store', () => ({
+	useProjectsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/root.store', () => ({
+	useRootStore: vi.fn(),
+}));
+
+const assertUserCannotClaimCredits = () => {
+	expect(screen.queryByText('Get 100 free OpenAI API credits')).not.toBeInTheDocument();
+	expect(screen.queryByRole('button', { name: 'Claim credits' })).not.toBeInTheDocument();
+};
+
+const assertUserCanClaimCredits = () => {
+	expect(screen.getByText('Get 100 free OpenAI API credits')).toBeInTheDocument();
+	expect(screen.queryByRole('button', { name: 'Claim credits' })).toBeInTheDocument();
+};
+
+const assertUserClaimedCredits = () => {
+	expect(screen.getByText('Claimed 100 free OpenAI API credits')).toBeInTheDocument();
+};
+
+describe('FreeAiCreditsCallout', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		(useSettingsStore as any).mockReturnValue({
+			isAiCreditsEnabled: true,
+			aiCreditsQuota: 100,
+		});
+
+		(useCredentialsStore as any).mockReturnValue({
+			allCredentials: [],
+			upsertCredential: vi.fn(),
+			claimFreeAiCredits: vi.fn(),
+		});
+
+		(useUsersStore as any).mockReturnValue({
+			currentUser: {
+				settings: {
+					userClaimedAiCredits: false,
+				},
+			},
+		});
+
+		(useNDVStore as any).mockReturnValue({
+			activeNode: { type: '@n8n/n8n-nodes-langchain.openAi' },
+		});
+
+		(usePostHog as any).mockReturnValue({
+			isFeatureEnabled: vi.fn().mockReturnValue(true),
+		});
+
+		(useProjectsStore as any).mockReturnValue({
+			currentProject: { id: 'test-project-id' },
+		});
+
+		(useRootStore as any).mockReturnValue({
+			restApiContext: {},
+		});
+
+		(useToast as any).mockReturnValue({
+			showError: vi.fn(),
+		});
+	});
+
+	it('should shows the claim callout when the user can claim credits', () => {
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCanClaimCredits();
+	});
+
+	it('should show success callout when credit are claimed', async () => {
+		const credentialsStore = mockedStore(useCredentialsStore);
+
+		renderComponent(FreeAiCreditsCallout);
+
+		const claimButton = screen.getByRole('button', {
+			name: 'Claim credits',
+		});
+
+		await fireEvent.click(claimButton);
+
+		expect(credentialsStore.claimFreeAiCredits).toHaveBeenCalledWith('test-project-id');
+		assertUserClaimedCredits();
+	});
+
+	it('should not be able to claim credits is user already claimed credits', async () => {
+		(useUsersStore as any).mockReturnValue({
+			currentUser: {
+				settings: {
+					userClaimedAiCredits: true,
+				},
+			},
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits is user does not have ai credits enabled', async () => {
+		(useSettingsStore as any).mockReturnValue({
+			isAiCreditsEnabled: false,
+			aiCreditsQuota: 0,
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if user it is not in experiment', async () => {
+		(usePostHog as any).mockReturnValue({
+			isFeatureEnabled: vi.fn().mockReturnValue(false),
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if user already has OpenAiApi credential', async () => {
+		(useCredentialsStore as any).mockReturnValue({
+			allCredentials: [
+				{
+					type: 'openAiApi',
+				},
+			],
+			upsertCredential: vi.fn(),
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if active node it is not a valid node', async () => {
+		(useNDVStore as any).mockReturnValue({
+			activeNode: { type: '@n8n/n8n-nodes.jira' },
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+});