fix(editor): Show claim free ai credits modal on credentials (#19241)

Co-authored-by: konstantintieber <konstantin.tieber@n8n.io>

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

@@ -32,6 +32,7 @@ import GoogleAuthButton from './GoogleAuthButton.vue';
 import OauthButton from './OauthButton.vue';
 import { useAssistantStore } from '@/stores/assistant.store';
 import InlineAskAssistantButton from '@n8n/design-system/components/InlineAskAssistantButton/InlineAskAssistantButton.vue';
+import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
 
 type Props = {
 	mode: string;
@@ -229,6 +230,7 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 	</n8n-callout>
 	<div v-else>
 		<div :class="$style.config" data-test-id="node-credentials-config-container">
+			<FreeAiCreditsCallout :credential-type-name="credentialType?.name" />
 			<Banner
 				v-show="showValidationWarning"
 				theme="danger"

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

@@ -183,4 +183,48 @@ describe('FreeAiCreditsCallout', () => {
 
 		assertUserCannotClaimCredits();
 	});
+
+	describe('credentialTypeName prop (credentials page)', () => {
+		it('should not show claim callout when editing a non-openapi credential', async () => {
+			(useNDVStore as any).mockReturnValue({
+				activeNode: null,
+			});
+
+			renderComponent(FreeAiCreditsCallout, {
+				props: {
+					credentialTypeName: 'googleSheetsOAuth2Api',
+				},
+			});
+
+			assertUserCannotClaimCredits();
+		});
+
+		it('should show claim callout editing openapi credential with no active node', async () => {
+			(useNDVStore as any).mockReturnValue({
+				activeNode: null,
+			});
+
+			renderComponent(FreeAiCreditsCallout, {
+				props: {
+					credentialTypeName: 'openAiApi',
+				},
+			});
+
+			assertUserCanClaimCredits();
+		});
+
+		it('should not show claim callout when credential type is undefined and no valid active node', async () => {
+			(useNDVStore as any).mockReturnValue({
+				activeNode: null,
+			});
+
+			renderComponent(FreeAiCreditsCallout, {
+				props: {
+					credentialTypeName: undefined,
+				},
+			});
+
+			assertUserCannotClaimCredits();
+		});
+	});
 });

packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.vue

@@ -11,6 +11,12 @@ import { computed, ref } from 'vue';
 import { OPEN_AI_API_CREDENTIAL_TYPE } from 'n8n-workflow';
 import { N8nCallout, N8nText } from '@n8n/design-system';
 
+type Props = {
+	credentialTypeName?: string;
+};
+
+const props = defineProps<Props>();
+
 const LANGCHAIN_NODES_PREFIX = '@n8n/n8n-nodes-langchain.';
 
 const N8N_NODES_PREFIX = '@n8n/n8n-nodes.';
@@ -42,6 +48,10 @@ const userHasOpenAiCredentialAlready = computed(
 		).length,
 );
 
+const isEditingOpenAiCredential = computed(
+	() => props.credentialTypeName && props.credentialTypeName === OPEN_AI_API_CREDENTIAL_TYPE,
+);
+
 const userHasClaimedAiCreditsAlready = computed(
 	() => !!usersStore.currentUser?.settings?.userClaimedAiCredits,
 );
@@ -55,7 +65,7 @@ const activeNodeHasOpenAiApiCredential = computed(
 const userCanClaimOpenAiCredits = computed(() => {
 	return (
 		settingsStore.isAiCreditsEnabled &&
-		activeNodeHasOpenAiApiCredential.value &&
+		(activeNodeHasOpenAiApiCredential.value || isEditingOpenAiCredential.value) &&
 		!userHasOpenAiCredentialAlready.value &&
 		!userHasClaimedAiCreditsAlready.value
 	);