diff --git a/services/web/test/frontend/components/pdf-preview/error-assistant-ai-paywall-notification.spec.tsx b/services/web/test/frontend/components/pdf-preview/error-assistant-ai-paywall-notification.spec.tsx
new file mode 100644
index 0000000000..6c472de7a4
--- /dev/null
+++ b/services/web/test/frontend/components/pdf-preview/error-assistant-ai-paywall-notification.spec.tsx
@@ -0,0 +1,103 @@
+import { FC, PropsWithChildren, useState } from 'react'
+import { DetachCompileContext } from '@/shared/context/detach-compile-context'
+import ErrorAssistantAiPaywallNotification from '@/features/pdf-preview/components/error-assistant-ai-paywall-notification'
+import {
+ EditorProviders,
+ makeEditorProvider,
+} from '../../helpers/editor-providers'
+
+const PAYWALL_TEXT = 'You’ve reached the fair usage limit on your plan'
+
+const futureDate = () => new Date(Date.now() + 60 * 60 * 1000)
+
+function dispatchSuggestFixPaywall() {
+ cy.window().then(win => {
+ win.dispatchEvent(
+ new CustomEvent('aiAssist:showPaywall', {
+ detail: { origin: 'suggest-fix' },
+ })
+ )
+ })
+}
+
+function makeShowLogsCompileProvider(initialShowLogs: boolean) {
+ const Provider: FC
= ({ children }) => {
+ const [showLogs, setShowLogs] = useState(initialShowLogs)
+ return (
+
+
+ {children}
+
+ )
+ }
+ return Provider
+}
+
+function mountSuggestFixPaywall(initialShowLogs = true) {
+ cy.window().then(win => {
+ win.metaAttributesCache.set('ol-showAiFeatures', true)
+ })
+
+ cy.mount(
+
+
+
+ )
+}
+
+describe('', function () {
+ it('does not render the paywall before the suggest-fix paywall event fires', function () {
+ mountSuggestFixPaywall()
+ cy.contains(PAYWALL_TEXT).should('not.exist')
+ })
+
+ it('renders the paywall after the suggest-fix paywall event fires', function () {
+ mountSuggestFixPaywall()
+ dispatchSuggestFixPaywall()
+ cy.contains(PAYWALL_TEXT).should('be.visible')
+ })
+
+ it('ignores paywall events from other origins', function () {
+ mountSuggestFixPaywall()
+ cy.window().then(win => {
+ win.dispatchEvent(
+ new CustomEvent('aiAssist:showPaywall', {
+ detail: { origin: 'workbench' },
+ })
+ )
+ })
+ cy.contains(PAYWALL_TEXT).should('not.exist')
+ })
+
+ it('hides the paywall when the logs panel is closed', function () {
+ mountSuggestFixPaywall()
+ dispatchSuggestFixPaywall()
+ cy.contains(PAYWALL_TEXT).should('be.visible')
+
+ cy.findByTestId('toggle-logs').click()
+ cy.contains(PAYWALL_TEXT).should('not.exist')
+ })
+
+ it('does not re-show the paywall when the logs panel is reopened', function () {
+ mountSuggestFixPaywall()
+ dispatchSuggestFixPaywall()
+ cy.findByTestId('toggle-logs').click()
+ cy.findByTestId('toggle-logs').click()
+ cy.contains(PAYWALL_TEXT).should('not.exist')
+ })
+})
diff --git a/services/web/test/frontend/helpers/editor-providers.tsx b/services/web/test/frontend/helpers/editor-providers.tsx
index d81e4716e7..ce92da2684 100644
--- a/services/web/test/frontend/helpers/editor-providers.tsx
+++ b/services/web/test/frontend/helpers/editor-providers.tsx
@@ -277,23 +277,31 @@ export function makeEditorProvider({
cobranding = undefined,
renameProject = () => {},
isRestrictedTokenMember,
+ hasSuggestionsLeft = false,
+ hasTokensLeft = false,
+ premiumSuggestionResetDate = new Date(),
+ tokenResetDate = new Date(),
}: {
isProjectOwner?: boolean
cobranding?: Cobranding
renameProject?: () => void
isRestrictedTokenMember?: boolean
+ hasSuggestionsLeft?: boolean
+ hasTokensLeft?: boolean
+ premiumSuggestionResetDate?: Date
+ tokenResetDate?: Date
} = {}) {
const EditorProvider: FC = ({ children }) => {
const value = {
isProjectOwner,
renameProject,
isPendingEditor: false,
- hasSuggestionsLeft: false,
- premiumSuggestionResetDate: new Date(),
- hasTokensLeft: false,
+ hasSuggestionsLeft,
+ premiumSuggestionResetDate,
+ hasTokensLeft,
tokensLeft: 0,
setTokensLeft: () => {},
- tokenResetDate: new Date(),
+ tokenResetDate,
setTokenResetDate: () => {},
suggestionsLeft: 0,
setSuggestionsLeft: () => {},