Merge pull request #756 from zackproser/codex/implement-free-tier-with-email-submission-7ybr10

Improve email gate logic

Author: zackproser

src/app/blog/[slug]/page.tsx

@@ -12,6 +12,7 @@ import { ArticleLayout } from '@/components/ArticleLayout'
 import React from 'react'
 import { CheckCircle } from 'lucide-react'
 import { metadataLogger as logger } from '@/utils/logger'
+import { isEmailSubscribed } from '@/lib/newsletter'
 
 // Content type for this handler
 const CONTENT_TYPE = 'blog'
@@ -80,13 +81,20 @@ export default async function Page({ params }: PageProps) {
   } else {
     logger.debug(`Content (${slug}) is not marked as paid.`);
   }
+
+  let isSubscribed = false;
+  if (content?.commerce?.requiresEmail) {
+    isSubscribed = await isEmailSubscribed(session?.user?.email || null);
+  }
 
   logger.info(`Rendering page for slug: ${slug}, Paid: ${!!content?.commerce?.isPaid}, Purchased: ${hasPurchased}`);
 
   // Always use ArticleLayout for consistency, even for purchased content
+  const hideNewsletter = !!(content?.commerce?.requiresEmail && !isSubscribed)
+
   return (
     <>
-    <ArticleLayout metadata={content} serverHasPurchased={hasPurchased}>
+    <ArticleLayout metadata={content} serverHasPurchased={hasPurchased} hideNewsletter={hideNewsletter}>
       {hasPurchased ? (
         <div className="purchased-content">
           <div className="inline-flex items-center gap-2 bg-green-50 border border-green-200 rounded-full px-4 py-2 mb-6">
@@ -96,7 +104,7 @@ export default async function Page({ params }: PageProps) {
           {React.createElement(MdxContent)}
         </div>
       ) : (
-        renderPaywalledContent(MdxContent, content, hasPurchased)
+        renderPaywalledContent(MdxContent, content, hasPurchased, isSubscribed)
       )}
     </ArticleLayout>
     </>

src/app/learn/courses/[slug]/page.tsx

@@ -11,6 +11,7 @@ import {
   renderPaywalledContent,
   getDefaultPaywallText
 } from '@/lib/content-handlers'
+import { isEmailSubscribed } from '@/lib/newsletter'
 
 // Content type for this handler
 const CONTENT_TYPE = 'learn/courses'
@@ -48,9 +49,14 @@ export default async function CourseSlugPage({ params }: PageProps) {
   // Get user ID from session
   const session = await auth()
   const userId = session?.user.id
-  
+
   // Check if user has purchased access
   const userHasPurchased = await hasUserPurchased(userId, CONTENT_TYPE, slug)
+
+  let isSubscribed = false
+  if (content?.commerce?.requiresEmail) {
+    isSubscribed = await isEmailSubscribed(session?.user?.email || null)
+  }
 
   // Check if content requires payment
   if (content?.commerce?.isPaid) {
@@ -64,7 +70,7 @@ export default async function CourseSlugPage({ params }: PageProps) {
           {/* Note: We pass MdxContent to renderPaywalledContent below, 
               so no need to render it separately here unless you want a specific preview structure */}
           {/* <MdxContent /> */} 
-          {renderPaywalledContent(MdxContent, content, userHasPurchased)} 
+          {renderPaywalledContent(MdxContent, content, userHasPurchased, isSubscribed)}
           {/* Pass the entire content object to Paywall */}
           <Paywall 
             content={content}
@@ -81,7 +87,7 @@ export default async function CourseSlugPage({ params }: PageProps) {
   return (
     <>
       {/* Render potentially paywalled content (will render full if purchased or not paid) */}
-      {renderPaywalledContent(MdxContent, content, userHasPurchased)}
+      {renderPaywalledContent(MdxContent, content, userHasPurchased, isSubscribed)}
     </>
   )
 } 

src/components/ArticleContent.tsx

@@ -2,6 +2,8 @@
 
 import React from 'react'
 import Paywall from './Paywall'
+import NewsletterWrapper from './NewsletterWrapper'
+import EmailSignupGate from './EmailSignupGate'
 import { StaticImageData } from 'next/image'
 import { Content } from '@/types'
 
@@ -14,24 +16,28 @@ interface ArticleContentProps {
   paywallBody?: string
   buttonText?: string
   content: Content
+  requiresEmail?: boolean
+  isSubscribed?: boolean
 }
 
 export default function ArticleContent({ 
-  children, 
+  children,
   showFullContent,
   previewLength = 150,
   previewElements = 3,
   paywallHeader,
   paywallBody,
   buttonText,
-  content
+  content,
+  requiresEmail = false,
+  isSubscribed = false
 }: ArticleContentProps) {
   if (!content.slug) {
     console.warn('ArticleContent: content.slug is missing, rendering full content')
     return <>{children}</>
   }
 
-  if (showFullContent) {
+  if (showFullContent || (requiresEmail && isSubscribed)) {
     return <>{children}</>
   }
 
@@ -58,12 +64,19 @@ export default function ArticleContent({
       <div className="article-preview">
         {preview}
       </div>
-      <Paywall 
-        content={content}
-        paywallHeader={paywallHeader}
-        paywallBody={paywallBody}
-        buttonText={buttonText}
-      />
+      {requiresEmail ? (
+        <EmailSignupGate
+          header={paywallHeader}
+          body={paywallBody}
+        />
+      ) : (
+        <Paywall
+          content={content}
+          paywallHeader={paywallHeader}
+          paywallBody={paywallBody}
+          buttonText={buttonText}
+        />
+      )}
     </>
   )
-} 
+}

src/components/ArticleLayout.tsx

@@ -23,12 +23,14 @@ interface ArticleLayoutProps {
     miniPaywallDescription?: string | null
   }
   serverHasPurchased?: boolean
+  hideNewsletter?: boolean
 }
 
 export function ArticleLayout({
   children,
   metadata,
   serverHasPurchased = false,
+  hideNewsletter = false,
 }: ArticleLayoutProps) {
   const router = useRouter()
   const { data: session } = useSession()
@@ -192,10 +194,12 @@ export function ArticleLayout({
                 {children}
               </Prose>
             </article>
-            <NewsletterWrapper 
-              title={'If you made it this far, you can do anything!'} 
-              body={'I publish technical content for developers who want to skill up, and break down AI, vector databases and tools for investors'} 
-            />
+            {!hideNewsletter && (
+              <NewsletterWrapper
+                title={'If you made it this far, you can do anything!'}
+                body={'I publish technical content for developers who want to skill up, and break down AI, vector databases and tools for investors'}
+              />
+            )}
             <Suspense fallback={<div>Loading...</div>}>
               <GiscusWrapper />
             </Suspense>

src/components/EmailSignupGate.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import NewsletterWrapper from './NewsletterWrapper'
+
+interface EmailSignupGateProps {
+  header?: string
+  body?: string
+}
+
+export default function EmailSignupGate({
+  header,
+  body
+}: EmailSignupGateProps) {
+  return (
+    <div className="my-8 p-8 bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900 rounded-xl shadow-xl border border-zinc-300 dark:border-zinc-700">
+      <NewsletterWrapper
+        title={header || 'Sign in & subscribe to read for free'}
+        body={body || 'Sign in to zackproser.com and subscribe to unlock this article.'}
+        successMessage="Thanks for subscribing! Refresh to view the full article."
+        position="paywall"
+      />
+    </div>
+  )
+}

src/lib/content-handlers.ts

@@ -447,14 +447,29 @@ export function getDefaultPaywallText(contentType: string): {
 export function renderPaywalledContent(
   MdxContent: React.ComponentType,
   content: Content, // Use the processed Content type
-  hasPurchased: boolean
+  hasPurchased: boolean,
+  isSubscribed: boolean
 ) {
   // Determine if we should show the full content
-  const showFullContent = !content.commerce?.isPaid || hasPurchased;
+  const showFullContent =
+    (!content.commerce?.isPaid && !content.commerce?.requiresEmail) ||
+    hasPurchased ||
+    (content.commerce?.requiresEmail && isSubscribed);
 
   // Get default paywall text based on content type
   const defaultText = getDefaultPaywallText(content.type);
 
+  let paywallHeader = defaultText.header;
+  let paywallBody = defaultText.body;
+
+  if (content.commerce?.requiresEmail) {
+    paywallHeader = content.commerce.paywallHeader || 'Sign in & subscribe to read for free';
+    paywallBody = content.commerce.paywallBody || 'Sign in to zackproser.com and subscribe to unlock this content.';
+  } else {
+    paywallHeader = content.commerce?.paywallHeader || defaultText.header;
+    paywallBody = content.commerce?.paywallBody || defaultText.body;
+  }
+
   // Dynamically import ArticleContent to avoid circular dependencies if this file is imported in components
   // Note: This file is marked 'server-only', but ArticleContent likely exists client-side,
   // so dynamic import with `ssr: false` might be needed depending on ArticleContent's usage.
@@ -473,9 +488,11 @@ export function renderPaywalledContent(
       title: content.title, // Use the processed title
       previewLength: content.commerce?.previewLength,
       previewElements: content.commerce?.previewElements,
-      paywallHeader: content.commerce?.paywallHeader || defaultText.header,
-      paywallBody: content.commerce?.paywallBody || defaultText.body,
+      paywallHeader: paywallHeader,
+      paywallBody: paywallBody,
       buttonText: content.commerce?.buttonText || defaultText.buttonText,
+      requiresEmail: content.commerce?.requiresEmail,
+      isSubscribed: isSubscribed,
       // Pass content object itself if ArticleContent needs more data
       content: content,
     }

src/lib/newsletter.ts

@@ -0,0 +1,28 @@
+import { logger } from '@/utils/logger'
+
+/**
+ * Check if an email address is subscribed to the main EmailOctopus list.
+ * Returns true when the contact exists and has status 'SUBSCRIBED'.
+ */
+export async function isEmailSubscribed(email: string | null | undefined): Promise<boolean> {
+  if (!email) return false
+
+  try {
+    const apiKey = process.env.EMAIL_OCTOPUS_API_KEY
+    const listId = process.env.EMAIL_OCTOPUS_LIST_ID
+    if (!apiKey || !listId) return false
+
+    const endpoint = `https://emailoctopus.com/api/1.6/lists/${listId}/contacts/${encodeURIComponent(email)}?api_key=${apiKey}`
+    const res = await fetch(endpoint)
+    if (!res.ok) {
+      logger.warn(`EmailOctopus lookup failed for ${email}: ${res.status}`)
+      return false
+    }
+
+    const data = await res.json()
+    return data.status === 'SUBSCRIBED'
+  } catch (err) {
+    logger.error('Failed to check email subscription', err)
+    return false
+  }
+}

src/types/commerce.ts

@@ -3,6 +3,11 @@ import { StaticImageData } from 'next/image'
 // Commerce-related types
 export interface CommerceConfig {
   isPaid: boolean
+  /**
+   * When true, the content is free but requires the user to submit
+   * their email and be subscribed to the newsletter.
+   */
+  requiresEmail?: boolean
   price: number
   stripe_price_id?: string
   previewLength?: number