improvement(emails): update unsub page, standardize unsub process (#2881 )

2026-01-19 03:48:02 -05:00 · 2026-01-18 20:42:04 -08:00
25 changed files with 251 additions and 962 deletions
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -1,10 +1,13 @@
 'use client'

 import { Suspense, useEffect, useState } from 'react'
-import { CheckCircle, Heart, Info, Loader2, XCircle } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import { useSearchParams } from 'next/navigation'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { useBrandConfig } from '@/lib/branding/branding'
+import { inter } from '@/app/_styles/fonts/inter/inter'
+import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
+import { SupportFooter } from '@/app/(auth)/components/support-footer'
+import { InviteLayout } from '@/app/invite/components'

 interface UnsubscribeData {
  success: boolean
@@ -27,7 +30,6 @@ function UnsubscribeContent() {
  const [error, setError] = useState<string | null>(null)
  const [processing, setProcessing] = useState(false)
  const [unsubscribed, setUnsubscribed] = useState(false)
-  const brand = useBrandConfig()

  const email = searchParams.get('email')
  const token = searchParams.get('token')
@@ -109,7 +111,7 @@ function UnsubscribeContent() {
      } else {
        setError(result.error || 'Failed to unsubscribe')
      }
-    } catch (error) {
+    } catch {
      setError('Failed to process unsubscribe request')
    } finally {
      setProcessing(false)
@@ -118,272 +120,171 @@ function UnsubscribeContent() {

  if (loading) {
    return (
-      <div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
-        <Card className='w-full max-w-md border shadow-sm'>
-          <CardContent className='flex items-center justify-center p-8'>
-            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
-          </CardContent>
-        </Card>
-      </div>
+      <InviteLayout>
+        <div className='space-y-1 text-center'>
+          <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+            Loading
+          </h1>
+          <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+            Validating your unsubscribe link...
+          </p>
+        </div>
+        <div className={`${inter.className} mt-8 flex w-full items-center justify-center py-8`}>
+          <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
+        </div>
+        <SupportFooter position='absolute' />
+      </InviteLayout>
    )
  }

  if (error) {
    return (
-      <div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
-        <Card className='w-full max-w-md border shadow-sm'>
-          <CardHeader className='text-center'>
-            <XCircle className='mx-auto mb-2 h-12 w-12 text-red-500' />
-            <CardTitle className='text-foreground'>Invalid Unsubscribe Link</CardTitle>
-            <CardDescription className='text-muted-foreground'>
-              This unsubscribe link is invalid or has expired
-            </CardDescription>
-          </CardHeader>
-          <CardContent className='space-y-4'>
-            <div className='rounded-lg border bg-red-50 p-4'>
-              <p className='text-red-800 text-sm'>
-                <strong>Error:</strong> {error}
-              </p>
-            </div>
+      <InviteLayout>
+        <div className='space-y-1 text-center'>
+          <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+            Invalid Unsubscribe Link
+          </h1>
+          <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+            {error}
+          </p>
+        </div>

-            <div className='space-y-3'>
-              <p className='text-muted-foreground text-sm'>This could happen if:</p>
-              <ul className='ml-4 list-inside list-disc space-y-1 text-muted-foreground text-sm'>
-                <li>The link is missing required parameters</li>
-                <li>The link has expired or been used already</li>
-                <li>The link was copied incorrectly</li>
-              </ul>
-            </div>
+        <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
+          <BrandedButton onClick={() => window.history.back()}>Go Back</BrandedButton>
+        </div>

-            <div className='mt-6 flex flex-col gap-3'>
-              <Button
-                onClick={() =>
-                  window.open(
-                    `mailto:${brand.supportEmail}?subject=Unsubscribe%20Help&body=Hi%2C%20I%20need%20help%20unsubscribing%20from%20emails.%20My%20unsubscribe%20link%20is%20not%20working.`,
-                    '_blank'
-                  )
-                }
-                className='w-full bg-[var(--brand-primary-hex)] font-medium text-white shadow-sm transition-colors duration-200 hover:bg-[var(--brand-primary-hover-hex)]'
-              >
-                Contact Support
-              </Button>
-              <Button onClick={() => window.history.back()} variant='outline' className='w-full'>
-                Go Back
-              </Button>
-            </div>
-
-            <div className='mt-4 text-center'>
-              <p className='text-muted-foreground text-xs'>
-                Need immediate help? Email us at{' '}
-                <a
-                  href={`mailto:${brand.supportEmail}`}
-                  className='text-muted-foreground hover:underline'
-                >
-                  {brand.supportEmail}
-                </a>
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+        <SupportFooter position='absolute' />
+      </InviteLayout>
    )
  }

  if (data?.isTransactional) {
    return (
-      <div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
-        <Card className='w-full max-w-md border shadow-sm'>
-          <CardHeader className='text-center'>
-            <Info className='mx-auto mb-2 h-12 w-12 text-blue-500' />
-            <CardTitle className='text-foreground'>Important Account Emails</CardTitle>
-            <CardDescription className='text-muted-foreground'>
-              This email contains important information about your account
-            </CardDescription>
-          </CardHeader>
-          <CardContent className='space-y-4'>
-            <div className='rounded-lg border bg-blue-50 p-4'>
-              <p className='text-blue-800 text-sm'>
-                <strong>Transactional emails</strong> like password resets, account confirmations,
-                and security alerts cannot be unsubscribed from as they contain essential
-                information for your account security and functionality.
-              </p>
-            </div>
+      <InviteLayout>
+        <div className='space-y-1 text-center'>
+          <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+            Important Account Emails
+          </h1>
+          <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+            Transactional emails like password resets, account confirmations, and security alerts
+            cannot be unsubscribed from as they contain essential information for your account.
+          </p>
+        </div>

-            <div className='space-y-3'>
-              <p className='text-foreground text-sm'>
-                If you no longer wish to receive these emails, you can:
-              </p>
-              <ul className='ml-4 list-inside list-disc space-y-1 text-muted-foreground text-sm'>
-                <li>Close your account entirely</li>
-                <li>Contact our support team for assistance</li>
-              </ul>
-            </div>
+        <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
+          <BrandedButton onClick={() => window.close()}>Close</BrandedButton>
+        </div>

-            <div className='mt-6 flex flex-col gap-3'>
-              <Button
-                onClick={() =>
-                  window.open(
-                    `mailto:${brand.supportEmail}?subject=Account%20Help&body=Hi%2C%20I%20need%20help%20with%20my%20account%20emails.`,
-                    '_blank'
-                  )
-                }
-                className='w-full bg-blue-600 text-white hover:bg-blue-700'
-              >
-                Contact Support
-              </Button>
-              <Button onClick={() => window.close()} variant='outline' className='w-full'>
-                Close
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+        <SupportFooter position='absolute' />
+      </InviteLayout>
    )
  }

  if (unsubscribed) {
    return (
-      <div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
-        <Card className='w-full max-w-md border shadow-sm'>
-          <CardHeader className='text-center'>
-            <CheckCircle className='mx-auto mb-2 h-12 w-12 text-green-500' />
-            <CardTitle className='text-foreground'>Successfully Unsubscribed</CardTitle>
-            <CardDescription className='text-muted-foreground'>
-              You have been unsubscribed from our emails. You will stop receiving emails within 48
-              hours.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className='text-center'>
-            <p className='text-muted-foreground text-sm'>
-              If you change your mind, you can always update your email preferences in your account
-              settings or contact us at{' '}
-              <a
-                href={`mailto:${brand.supportEmail}`}
-                className='text-muted-foreground hover:underline'
-              >
-                {brand.supportEmail}
-              </a>
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+      <InviteLayout>
+        <div className='space-y-1 text-center'>
+          <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+            Successfully Unsubscribed
+          </h1>
+          <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+            You have been unsubscribed from our emails. You will stop receiving emails within 48
+            hours.
+          </p>
+        </div>
+
+        <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
+          <BrandedButton onClick={() => window.close()}>Close</BrandedButton>
+        </div>
+
+        <SupportFooter position='absolute' />
+      </InviteLayout>
    )
  }

+  const isAlreadyUnsubscribedFromAll = data?.currentPreferences.unsubscribeAll
+
  return (
-    <div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
-      <Card className='w-full max-w-md border shadow-sm'>
-        <CardHeader className='text-center'>
-          <Heart className='mx-auto mb-2 h-12 w-12 text-red-500' />
-          <CardTitle className='text-foreground'>We&apos;re sorry to see you go!</CardTitle>
-          <CardDescription className='text-muted-foreground'>
-            We understand email preferences are personal. Choose which emails you&apos;d like to
-            stop receiving from Sim.
-          </CardDescription>
-          <div className='mt-2 rounded-lg border bg-muted/50 p-3'>
-            <p className='text-muted-foreground text-xs'>
-              Email: <span className='font-medium text-foreground'>{data?.email}</span>
-            </p>
-          </div>
-        </CardHeader>
-        <CardContent className='space-y-4'>
-          <div className='space-y-3'>
-            <Button
-              onClick={() => handleUnsubscribe('all')}
-              disabled={processing || data?.currentPreferences.unsubscribeAll}
-              variant='destructive'
-              className='w-full'
-            >
-              {data?.currentPreferences.unsubscribeAll ? (
-                <CheckCircle className='mr-2 h-4 w-4' />
-              ) : null}
-              {processing
-                ? 'Unsubscribing...'
-                : data?.currentPreferences.unsubscribeAll
-                  ? 'Unsubscribed from All Emails'
-                  : 'Unsubscribe from All Marketing Emails'}
-            </Button>
+    <InviteLayout>
+      <div className='space-y-1 text-center'>
+        <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+          Email Preferences
+        </h1>
+        <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+          Choose which emails you'd like to stop receiving.
+        </p>
+        <p className={`${inter.className} mt-2 font-[380] text-[14px] text-muted-foreground`}>
+          {data?.email}
+        </p>
+      </div>

-            <div className='text-center text-muted-foreground text-sm'>
-              or choose specific types:
-            </div>
+      <div className={`${inter.className} mt-8 w-full max-w-[410px] space-y-3`}>
+        <BrandedButton
+          onClick={() => handleUnsubscribe('all')}
+          disabled={processing || isAlreadyUnsubscribedFromAll}
+          loading={processing}
+          loadingText='Unsubscribing'
+        >
+          {isAlreadyUnsubscribedFromAll
+            ? 'Unsubscribed from All Emails'
+            : 'Unsubscribe from All Marketing Emails'}
+        </BrandedButton>

-            <Button
-              onClick={() => handleUnsubscribe('marketing')}
-              disabled={
-                processing ||
-                data?.currentPreferences.unsubscribeAll ||
-                data?.currentPreferences.unsubscribeMarketing
-              }
-              variant='outline'
-              className='w-full'
-            >
-              {data?.currentPreferences.unsubscribeMarketing ? (
-                <CheckCircle className='mr-2 h-4 w-4' />
-              ) : null}
-              {data?.currentPreferences.unsubscribeMarketing
-                ? 'Unsubscribed from Marketing'
-                : 'Unsubscribe from Marketing Emails'}
-            </Button>
+        <div className='py-2 text-center'>
+          <span className={`${inter.className} font-[380] text-[14px] text-muted-foreground`}>
+            or choose specific types
+          </span>
+        </div>

-            <Button
-              onClick={() => handleUnsubscribe('updates')}
-              disabled={
-                processing ||
-                data?.currentPreferences.unsubscribeAll ||
-                data?.currentPreferences.unsubscribeUpdates
-              }
-              variant='outline'
-              className='w-full'
-            >
-              {data?.currentPreferences.unsubscribeUpdates ? (
-                <CheckCircle className='mr-2 h-4 w-4' />
-              ) : null}
-              {data?.currentPreferences.unsubscribeUpdates
-                ? 'Unsubscribed from Updates'
-                : 'Unsubscribe from Product Updates'}
-            </Button>
+        <BrandedButton
+          onClick={() => handleUnsubscribe('marketing')}
+          disabled={
+            processing ||
+            isAlreadyUnsubscribedFromAll ||
+            data?.currentPreferences.unsubscribeMarketing
+          }
+        >
+          {data?.currentPreferences.unsubscribeMarketing
+            ? 'Unsubscribed from Marketing'
+            : 'Unsubscribe from Marketing Emails'}
+        </BrandedButton>

-            <Button
-              onClick={() => handleUnsubscribe('notifications')}
-              disabled={
-                processing ||
-                data?.currentPreferences.unsubscribeAll ||
-                data?.currentPreferences.unsubscribeNotifications
-              }
-              variant='outline'
-              className='w-full'
-            >
-              {data?.currentPreferences.unsubscribeNotifications ? (
-                <CheckCircle className='mr-2 h-4 w-4' />
-              ) : null}
-              {data?.currentPreferences.unsubscribeNotifications
-                ? 'Unsubscribed from Notifications'
-                : 'Unsubscribe from Notifications'}
-            </Button>
-          </div>
+        <BrandedButton
+          onClick={() => handleUnsubscribe('updates')}
+          disabled={
+            processing ||
+            isAlreadyUnsubscribedFromAll ||
+            data?.currentPreferences.unsubscribeUpdates
+          }
+        >
+          {data?.currentPreferences.unsubscribeUpdates
+            ? 'Unsubscribed from Updates'
+            : 'Unsubscribe from Product Updates'}
+        </BrandedButton>

-          <div className='mt-6 space-y-3'>
-            <div className='rounded-lg border bg-muted/50 p-3'>
-              <p className='text-center text-muted-foreground text-xs'>
-                <strong>Note:</strong> You&apos;ll continue receiving important account emails like
-                password resets and security alerts.
-              </p>
-            </div>
+        <BrandedButton
+          onClick={() => handleUnsubscribe('notifications')}
+          disabled={
+            processing ||
+            isAlreadyUnsubscribedFromAll ||
+            data?.currentPreferences.unsubscribeNotifications
+          }
+        >
+          {data?.currentPreferences.unsubscribeNotifications
+            ? 'Unsubscribed from Notifications'
+            : 'Unsubscribe from Notifications'}
+        </BrandedButton>
+      </div>

-            <p className='text-center text-muted-foreground text-xs'>
-              Questions? Contact us at{' '}
-              <a
-                href={`mailto:${brand.supportEmail}`}
-                className='text-muted-foreground hover:underline'
-              >
-                {brand.supportEmail}
-              </a>
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+      <div className={`${inter.className} mt-6 max-w-[410px] text-center`}>
+        <p className='font-[380] text-[13px] text-muted-foreground'>
+          You'll continue receiving important account emails like password resets and security
+          alerts.
+        </p>
+      </div>
+
+      <SupportFooter position='absolute' />
+    </InviteLayout>
  )
 }

@@ -391,13 +292,20 @@ export default function Unsubscribe() {
  return (
    <Suspense
      fallback={
-        <div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
-          <Card className='w-full max-w-md border shadow-sm'>
-            <CardContent className='flex items-center justify-center p-8'>
-              <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
-            </CardContent>
-          </Card>
-        </div>
+        <InviteLayout>
+          <div className='space-y-1 text-center'>
+            <h1 className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}>
+              Loading
+            </h1>
+            <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+              Validating your unsubscribe link...
+            </p>
+          </div>
+          <div className={`${inter.className} mt-8 flex w-full items-center justify-center py-8`}>
+            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
+          </div>
+          <SupportFooter position='absolute' />
+        </InviteLayout>
      }
    >
      <UnsubscribeContent />
--- a/apps/sim/components/emails/auth/otp-verification-email.tsx
+++ b/apps/sim/components/emails/auth/otp-verification-email.tsx
@@ -34,7 +34,7 @@ export function OTPVerificationEmail({
  const brand = getBrandConfig()

  return (
-    <EmailLayout preview={getSubjectByType(type, brand.name, chatTitle)}>
+    <EmailLayout preview={getSubjectByType(type, brand.name, chatTitle)} showUnsubscribe={false}>
      <Text style={baseStyles.paragraph}>Your verification code:</Text>

      <Section style={baseStyles.codeContainer}>
--- a/apps/sim/components/emails/auth/reset-password-email.tsx
+++ b/apps/sim/components/emails/auth/reset-password-email.tsx
@@ -12,7 +12,7 @@ export function ResetPasswordEmail({ username = '', resetLink = '' }: ResetPassw
  const brand = getBrandConfig()

  return (
-    <EmailLayout preview={`Reset your ${brand.name} password`}>
+    <EmailLayout preview={`Reset your ${brand.name} password`} showUnsubscribe={false}>
      <Text style={baseStyles.paragraph}>Hello {username},</Text>
      <Text style={baseStyles.paragraph}>
        A password reset was requested for your {brand.name} account. Click below to set a new
--- a/apps/sim/components/emails/auth/welcome-email.tsx
+++ b/apps/sim/components/emails/auth/welcome-email.tsx
@@ -13,7 +13,7 @@ export function WelcomeEmail({ userName }: WelcomeEmailProps) {
  const baseUrl = getBaseUrl()

  return (
-    <EmailLayout preview={`Welcome to ${brand.name}`}>
+    <EmailLayout preview={`Welcome to ${brand.name}`} showUnsubscribe={false}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
        {userName ? `Hey ${userName},` : 'Hey,'}
      </Text>
--- a/apps/sim/components/emails/billing/credit-purchase-email.tsx
+++ b/apps/sim/components/emails/billing/credit-purchase-email.tsx
@@ -23,7 +23,7 @@ export function CreditPurchaseEmail({
  const previewText = `${brand.name}: $${amount.toFixed(2)} in credits added to your account`

  return (
-    <EmailLayout preview={previewText}>
+    <EmailLayout preview={previewText} showUnsubscribe={false}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
        {userName ? `Hi ${userName},` : 'Hi,'}
      </Text>
--- a/apps/sim/components/emails/billing/enterprise-subscription-email.tsx
+++ b/apps/sim/components/emails/billing/enterprise-subscription-email.tsx
@@ -18,7 +18,10 @@ export function EnterpriseSubscriptionEmail({
  const effectiveLoginLink = loginLink || `${baseUrl}/login`

  return (
-    <EmailLayout preview={`Your Enterprise Plan is now active on ${brand.name}`}>
+    <EmailLayout
+      preview={`Your Enterprise Plan is now active on ${brand.name}`}
+      showUnsubscribe={false}
+    >
      <Text style={baseStyles.paragraph}>Hello {userName},</Text>
      <Text style={baseStyles.paragraph}>
        Your <strong>Enterprise Plan</strong> is now active. You have full access to advanced
--- a/apps/sim/components/emails/billing/free-tier-upgrade-email.tsx
+++ b/apps/sim/components/emails/billing/free-tier-upgrade-email.tsx
@@ -31,7 +31,7 @@ export function FreeTierUpgradeEmail({
  const previewText = `${brand.name}: You've used ${percentUsed}% of your free credits`

  return (
-    <EmailLayout preview={previewText}>
+    <EmailLayout preview={previewText} showUnsubscribe={true}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
        {userName ? `Hi ${userName},` : 'Hi,'}
      </Text>
--- a/apps/sim/components/emails/billing/payment-failed-email.tsx
+++ b/apps/sim/components/emails/billing/payment-failed-email.tsx
@@ -25,7 +25,7 @@ export function PaymentFailedEmail({
  const previewText = `${brand.name}: Payment Failed - Action Required`

  return (
-    <EmailLayout preview={previewText}>
+    <EmailLayout preview={previewText} showUnsubscribe={false}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
        {userName ? `Hi ${userName},` : 'Hi,'}
      </Text>
--- a/apps/sim/components/emails/billing/plan-welcome-email.tsx
+++ b/apps/sim/components/emails/billing/plan-welcome-email.tsx
@@ -18,7 +18,7 @@ export function PlanWelcomeEmail({ planName, userName, loginLink }: PlanWelcomeE
  const previewText = `${brand.name}: Your ${planName} plan is active`

  return (
-    <EmailLayout preview={previewText}>
+    <EmailLayout preview={previewText} showUnsubscribe={true}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
        {userName ? `Hi ${userName},` : 'Hi,'}
      </Text>
--- a/apps/sim/components/emails/billing/usage-threshold-email.tsx
+++ b/apps/sim/components/emails/billing/usage-threshold-email.tsx
@@ -25,7 +25,7 @@ export function UsageThresholdEmail({
  const previewText = `${brand.name}: You're at ${percentUsed}% of your ${planName} monthly budget`

  return (
-    <EmailLayout preview={previewText}>
+    <EmailLayout preview={previewText} showUnsubscribe={true}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
        {userName ? `Hi ${userName},` : 'Hi,'}
      </Text>
--- a/apps/sim/components/emails/careers/careers-confirmation-email.tsx
+++ b/apps/sim/components/emails/careers/careers-confirmation-email.tsx
@@ -20,7 +20,10 @@ export function CareersConfirmationEmail({
  const baseUrl = getBaseUrl()

  return (
-    <EmailLayout preview={`Your application to ${brand.name} has been received`}>
+    <EmailLayout
+      preview={`Your application to ${brand.name} has been received`}
+      showUnsubscribe={false}
+    >
      <Text style={baseStyles.paragraph}>Hello {name},</Text>
      <Text style={baseStyles.paragraph}>
        We've received your application for <strong>{position}</strong>. Our team reviews every
--- a/apps/sim/components/emails/careers/careers-submission-email.tsx
+++ b/apps/sim/components/emails/careers/careers-submission-email.tsx
@@ -40,7 +40,7 @@ export function CareersSubmissionEmail({
  submittedDate = new Date(),
 }: CareersSubmissionEmailProps) {
  return (
-    <EmailLayout preview={`New Career Application from ${name}`} hideFooter>
+    <EmailLayout preview={`New Career Application from ${name}`} hideFooter showUnsubscribe={false}>
      <Text
        style={{
          ...baseStyles.paragraph,
--- a/apps/sim/components/emails/components/email-footer.tsx
+++ b/apps/sim/components/emails/components/email-footer.tsx
@@ -4,22 +4,29 @@ import { getBrandConfig } from '@/lib/branding/branding'
 import { isHosted } from '@/lib/core/config/feature-flags'
 import { getBaseUrl } from '@/lib/core/utils/urls'

-interface UnsubscribeOptions {
-  unsubscribeToken?: string
-  email?: string
-}
-
 interface EmailFooterProps {
  baseUrl?: string
-  unsubscribe?: UnsubscribeOptions
  messageId?: string
+  /**
+   * Whether to show unsubscribe link. Defaults to true.
+   * Set to false for transactional emails where unsubscribe doesn't apply.
+   */
+  showUnsubscribe?: boolean
 }

 /**
 * Email footer component styled to match Stripe's email design.
 * Sits in the gray area below the main white card.
+ *
+ * For non-transactional emails, the unsubscribe link uses placeholders
+ * {{UNSUBSCRIBE_TOKEN}} and {{UNSUBSCRIBE_EMAIL}} which are replaced
+ * by the mailer when sending.
 */
-export function EmailFooter({ baseUrl = getBaseUrl(), unsubscribe, messageId }: EmailFooterProps) {
+export function EmailFooter({
+  baseUrl = getBaseUrl(),
+  messageId,
+  showUnsubscribe = true,
+}: EmailFooterProps) {
  const brand = getBrandConfig()

  const footerLinkStyle = {
@@ -181,19 +188,20 @@ export function EmailFooter({ baseUrl = getBaseUrl(), unsubscribe, messageId }:
                •{' '}
                <a href={`${baseUrl}/terms`} style={footerLinkStyle} rel='noopener noreferrer'>
                  Terms of Service
-                </a>{' '}
-                •{' '}
-                <a
-                  href={
-                    unsubscribe?.unsubscribeToken && unsubscribe?.email
-                      ? `${baseUrl}/unsubscribe?token=${unsubscribe.unsubscribeToken}&email=${encodeURIComponent(unsubscribe.email)}`
-                      : `mailto:${brand.supportEmail}?subject=Unsubscribe%20Request&body=Please%20unsubscribe%20me%20from%20all%20emails.`
-                  }
-                  style={footerLinkStyle}
-                  rel='noopener noreferrer'
-                >
-                  Unsubscribe
                </a>
+                {showUnsubscribe && (
+                  <>
+                    {' '}
+                    •{' '}
+                    <a
+                      href={`${baseUrl}/unsubscribe?token={{UNSUBSCRIBE_TOKEN}}&email={{UNSUBSCRIBE_EMAIL}}`}
+                      style={footerLinkStyle}
+                      rel='noopener noreferrer'
+                    >
+                      Unsubscribe
+                    </a>
+                  </>
+                )}
              </td>
              <td style={baseStyles.gutter} width={spacing.gutter}>
                &nbsp;
--- a/apps/sim/components/emails/components/email-layout.tsx
+++ b/apps/sim/components/emails/components/email-layout.tsx
@@ -11,13 +11,23 @@ interface EmailLayoutProps {
  children: React.ReactNode
  /** Optional: hide footer for internal emails */
  hideFooter?: boolean
+  /**
+   * Whether to show unsubscribe link in footer.
+   * Set to false for transactional emails where unsubscribe doesn't apply.
+   */
+  showUnsubscribe: boolean
 }

 /**
 * Shared email layout wrapper providing consistent structure.
 * Includes Html, Head, Body, Container with logo header, and Footer.
 */
-export function EmailLayout({ preview, children, hideFooter = false }: EmailLayoutProps) {
+export function EmailLayout({
+  preview,
+  children,
+  hideFooter = false,
+  showUnsubscribe,
+}: EmailLayoutProps) {
  const brand = getBrandConfig()
  const baseUrl = getBaseUrl()

@@ -43,7 +53,7 @@ export function EmailLayout({ preview, children, hideFooter = false }: EmailLayo
        </Container>

        {/* Footer in gray section */}
-        {!hideFooter && <EmailFooter baseUrl={baseUrl} />}
+        {!hideFooter && <EmailFooter baseUrl={baseUrl} showUnsubscribe={showUnsubscribe} />}
      </Body>
    </Html>
  )
--- a/apps/sim/components/emails/invitations/batch-invitation-email.tsx
+++ b/apps/sim/components/emails/invitations/batch-invitation-email.tsx
@@ -54,6 +54,7 @@ export function BatchInvitationEmail({
  return (
    <EmailLayout
      preview={`You've been invited to join ${organizationName}${hasWorkspaces ? ` and ${workspaceInvitations.length} workspace(s)` : ''}`}
+      showUnsubscribe={false}
    >
      <Text style={baseStyles.paragraph}>Hello,</Text>
      <Text style={baseStyles.paragraph}>
--- a/apps/sim/components/emails/invitations/invitation-email.tsx
+++ b/apps/sim/components/emails/invitations/invitation-email.tsx
@@ -36,7 +36,10 @@ export function InvitationEmail({
  }

  return (
-    <EmailLayout preview={`You've been invited to join ${organizationName} on ${brand.name}`}>
+    <EmailLayout
+      preview={`You've been invited to join ${organizationName} on ${brand.name}`}
+      showUnsubscribe={false}
+    >
      <Text style={baseStyles.paragraph}>Hello,</Text>
      <Text style={baseStyles.paragraph}>
        <strong>{inviterName}</strong> invited you to join <strong>{organizationName}</strong> on{' '}
--- a/apps/sim/components/emails/invitations/polling-group-invitation-email.tsx
+++ b/apps/sim/components/emails/invitations/polling-group-invitation-email.tsx
@@ -22,7 +22,10 @@ export function PollingGroupInvitationEmail({
  const providerName = provider === 'google-email' ? 'Gmail' : 'Outlook'

  return (
-    <EmailLayout preview={`You've been invited to join ${pollingGroupName} on ${brand.name}`}>
+    <EmailLayout
+      preview={`You've been invited to join ${pollingGroupName} on ${brand.name}`}
+      showUnsubscribe={false}
+    >
      <Text style={baseStyles.paragraph}>Hello,</Text>
      <Text style={baseStyles.paragraph}>
        <strong>{inviterName}</strong> from <strong>{organizationName}</strong> has invited you to
--- a/apps/sim/components/emails/invitations/workspace-invitation-email.tsx
+++ b/apps/sim/components/emails/invitations/workspace-invitation-email.tsx
@@ -41,6 +41,7 @@ export function WorkspaceInvitationEmail({
  return (
    <EmailLayout
      preview={`You've been invited to join the "${workspaceName}" workspace on ${brand.name}!`}
+      showUnsubscribe={false}
    >
      <Text style={baseStyles.paragraph}>Hello,</Text>
      <Text style={baseStyles.paragraph}>
--- a/apps/sim/components/emails/notifications/workflow-notification-email.tsx
+++ b/apps/sim/components/emails/notifications/workflow-notification-email.tsx
@@ -73,7 +73,7 @@ export function WorkflowNotificationEmail({
      : 'Your workflow completed successfully.'

  return (
-    <EmailLayout preview={previewText}>
+    <EmailLayout preview={previewText} showUnsubscribe={true}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>Hello,</Text>
      <Text style={baseStyles.paragraph}>{message}</Text>

--- a/apps/sim/components/emails/support/help-confirmation-email.tsx
+++ b/apps/sim/components/emails/support/help-confirmation-email.tsx
@@ -32,7 +32,10 @@ export function HelpConfirmationEmail({
  const typeLabel = getTypeLabel(type)

  return (
-    <EmailLayout preview={`Your ${typeLabel.toLowerCase()} has been received`}>
+    <EmailLayout
+      preview={`Your ${typeLabel.toLowerCase()} has been received`}
+      showUnsubscribe={false}
+    >
      <Text style={baseStyles.paragraph}>Hello,</Text>
      <Text style={baseStyles.paragraph}>
        We've received your <strong>{typeLabel.toLowerCase()}</strong> and will get back to you
--- a/apps/sim/executor/execution/engine.test.ts
+++ b/apps/sim/executor/execution/engine.test.ts
@@ -1,599 +0,0 @@
-/**
- * @vitest-environment node
- */
-import { loggerMock } from '@sim/testing'
-import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from 'vitest'
-
-vi.mock('@sim/logger', () => loggerMock)
-
-vi.mock('@/lib/execution/cancellation', () => ({
-  isExecutionCancelled: vi.fn(),
-  isRedisCancellationEnabled: vi.fn(),
-}))
-
-import { isExecutionCancelled, isRedisCancellationEnabled } from '@/lib/execution/cancellation'
-import type { DAG, DAGNode } from '@/executor/dag/builder'
-import type { EdgeManager } from '@/executor/execution/edge-manager'
-import type { NodeExecutionOrchestrator } from '@/executor/orchestrators/node'
-import type { ExecutionContext } from '@/executor/types'
-import type { SerializedBlock } from '@/serializer/types'
-import { ExecutionEngine } from './engine'
-
-function createMockBlock(id: string): SerializedBlock {
-  return {
-    id,
-    metadata: { id: 'test', name: 'Test Block' },
-    position: { x: 0, y: 0 },
-    config: { tool: '', params: {} },
-    inputs: {},
-    outputs: {},
-    enabled: true,
-  }
-}
-
-function createMockNode(id: string, blockType = 'test'): DAGNode {
-  return {
-    id,
-    block: {
-      ...createMockBlock(id),
-      metadata: { id: blockType, name: `Block ${id}` },
-    },
-    outgoingEdges: new Map(),
-    incomingEdges: new Set(),
-    metadata: {},
-  }
-}
-
-function createMockContext(overrides: Partial<ExecutionContext> = {}): ExecutionContext {
-  return {
-    workflowId: 'test-workflow',
-    workspaceId: 'test-workspace',
-    executionId: 'test-execution',
-    userId: 'test-user',
-    blockStates: new Map(),
-    executedBlocks: new Set(),
-    blockLogs: [],
-    loopExecutions: new Map(),
-    parallelExecutions: new Map(),
-    completedLoops: new Set(),
-    activeExecutionPath: new Set(),
-    metadata: {
-      executionId: 'test-execution',
-      startTime: new Date().toISOString(),
-      pendingBlocks: [],
-    },
-    envVars: {},
-    ...overrides,
-  }
-}
-
-function createMockDAG(nodes: DAGNode[]): DAG {
-  const nodeMap = new Map<string, DAGNode>()
-  nodes.forEach((node) => nodeMap.set(node.id, node))
-  return {
-    nodes: nodeMap,
-    loopConfigs: new Map(),
-    parallelConfigs: new Map(),
-  }
-}
-
-interface MockEdgeManager extends EdgeManager {
-  processOutgoingEdges: ReturnType<typeof vi.fn>
-}
-
-function createMockEdgeManager(
-  processOutgoingEdgesImpl?: (node: DAGNode) => string[]
-): MockEdgeManager {
-  const mockFn = vi.fn().mockImplementation(processOutgoingEdgesImpl || (() => []))
-  return {
-    processOutgoingEdges: mockFn,
-    isNodeReady: vi.fn().mockReturnValue(true),
-    deactivateEdgeAndDescendants: vi.fn(),
-    restoreIncomingEdge: vi.fn(),
-    clearDeactivatedEdges: vi.fn(),
-    clearDeactivatedEdgesForNodes: vi.fn(),
-  } as unknown as MockEdgeManager
-}
-
-interface MockNodeOrchestrator extends NodeExecutionOrchestrator {
-  executionCount: number
-}
-
-function createMockNodeOrchestrator(executeDelay = 0): MockNodeOrchestrator {
-  const mock = {
-    executionCount: 0,
-    executeNode: vi.fn().mockImplementation(async () => {
-      mock.executionCount++
-      if (executeDelay > 0) {
-        await new Promise((resolve) => setTimeout(resolve, executeDelay))
-      }
-      return { nodeId: 'test', output: {}, isFinalOutput: false }
-    }),
-    handleNodeCompletion: vi.fn(),
-  }
-  return mock as unknown as MockNodeOrchestrator
-}
-
-describe('ExecutionEngine', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    ;(isExecutionCancelled as Mock).mockResolvedValue(false)
-    ;(isRedisCancellationEnabled as Mock).mockReturnValue(false)
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  describe('Normal execution', () => {
-    it('should execute a simple linear workflow', async () => {
-      const startNode = createMockNode('start', 'starter')
-      const endNode = createMockNode('end', 'function')
-      startNode.outgoingEdges.set('edge1', { target: 'end' })
-      endNode.incomingEdges.add('start')
-
-      const dag = createMockDAG([startNode, endNode])
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'start') return ['end']
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.success).toBe(true)
-      expect(nodeOrchestrator.executionCount).toBe(2)
-    })
-
-    it('should mark execution as successful when completed without cancellation', async () => {
-      const startNode = createMockNode('start', 'starter')
-      const dag = createMockDAG([startNode])
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.success).toBe(true)
-      expect(result.status).toBeUndefined()
-    })
-
-    it('should execute all nodes in a multi-node workflow', async () => {
-      const nodes = [
-        createMockNode('start', 'starter'),
-        createMockNode('middle1', 'function'),
-        createMockNode('middle2', 'function'),
-        createMockNode('end', 'function'),
-      ]
-
-      nodes[0].outgoingEdges.set('e1', { target: 'middle1' })
-      nodes[1].outgoingEdges.set('e2', { target: 'middle2' })
-      nodes[2].outgoingEdges.set('e3', { target: 'end' })
-
-      const dag = createMockDAG(nodes)
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'start') return ['middle1']
-        if (node.id === 'middle1') return ['middle2']
-        if (node.id === 'middle2') return ['end']
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.success).toBe(true)
-      expect(nodeOrchestrator.executionCount).toBe(4)
-    })
-  })
-
-  describe('Cancellation via AbortSignal', () => {
-    it('should stop execution immediately when aborted before start', async () => {
-      const abortController = new AbortController()
-      abortController.abort()
-
-      const startNode = createMockNode('start', 'starter')
-      const dag = createMockDAG([startNode])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.status).toBe('cancelled')
-      expect(nodeOrchestrator.executionCount).toBe(0)
-    })
-
-    it('should stop execution when aborted mid-workflow', async () => {
-      const abortController = new AbortController()
-
-      const nodes = Array.from({ length: 5 }, (_, i) => createMockNode(`node${i}`, 'function'))
-      for (let i = 0; i < nodes.length - 1; i++) {
-        nodes[i].outgoingEdges.set(`e${i}`, { target: `node${i + 1}` })
-      }
-
-      const dag = createMockDAG(nodes)
-      const context = createMockContext({ abortSignal: abortController.signal })
-
-      let callCount = 0
-      const edgeManager = createMockEdgeManager((node) => {
-        callCount++
-        if (callCount === 2) abortController.abort()
-        const idx = Number.parseInt(node.id.replace('node', ''))
-        if (idx < 4) return [`node${idx + 1}`]
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('node0')
-
-      expect(result.success).toBe(false)
-      expect(result.status).toBe('cancelled')
-      expect(nodeOrchestrator.executionCount).toBeLessThan(5)
-    })
-
-    it('should not wait for slow executions when cancelled', async () => {
-      const abortController = new AbortController()
-
-      const startNode = createMockNode('start', 'starter')
-      const slowNode = createMockNode('slow', 'function')
-      startNode.outgoingEdges.set('edge1', { target: 'slow' })
-
-      const dag = createMockDAG([startNode, slowNode])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'start') return ['slow']
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator(500)
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-
-      const executionPromise = engine.run('start')
-      setTimeout(() => abortController.abort(), 50)
-
-      const startTime = Date.now()
-      const result = await executionPromise
-      const duration = Date.now() - startTime
-
-      expect(result.status).toBe('cancelled')
-      expect(duration).toBeLessThan(400)
-    })
-
-    it('should return cancelled status even if error thrown during cancellation', async () => {
-      const abortController = new AbortController()
-      abortController.abort()
-
-      const startNode = createMockNode('start', 'starter')
-      const dag = createMockDAG([startNode])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.status).toBe('cancelled')
-      expect(result.success).toBe(false)
-    })
-  })
-
-  describe('Cancellation via Redis', () => {
-    it('should check Redis for cancellation when enabled', async () => {
-      ;(isRedisCancellationEnabled as Mock).mockReturnValue(true)
-      ;(isExecutionCancelled as Mock).mockResolvedValue(false)
-
-      const startNode = createMockNode('start', 'starter')
-      const dag = createMockDAG([startNode])
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      await engine.run('start')
-
-      expect(isExecutionCancelled as Mock).toHaveBeenCalled()
-    })
-
-    it('should stop execution when Redis reports cancellation', async () => {
-      ;(isRedisCancellationEnabled as Mock).mockReturnValue(true)
-
-      let checkCount = 0
-      ;(isExecutionCancelled as Mock).mockImplementation(async () => {
-        checkCount++
-        return checkCount > 1
-      })
-
-      const nodes = Array.from({ length: 5 }, (_, i) => createMockNode(`node${i}`, 'function'))
-      for (let i = 0; i < nodes.length - 1; i++) {
-        nodes[i].outgoingEdges.set(`e${i}`, { target: `node${i + 1}` })
-      }
-
-      const dag = createMockDAG(nodes)
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager((node) => {
-        const idx = Number.parseInt(node.id.replace('node', ''))
-        if (idx < 4) return [`node${idx + 1}`]
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator(150)
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('node0')
-
-      expect(result.success).toBe(false)
-      expect(result.status).toBe('cancelled')
-    })
-
-    it('should respect cancellation check interval', async () => {
-      ;(isRedisCancellationEnabled as Mock).mockReturnValue(true)
-      ;(isExecutionCancelled as Mock).mockResolvedValue(false)
-
-      const startNode = createMockNode('start', 'starter')
-      const dag = createMockDAG([startNode])
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      await engine.run('start')
-
-      expect((isExecutionCancelled as Mock).mock.calls.length).toBeGreaterThanOrEqual(1)
-    })
-  })
-
-  describe('Loop execution with cancellation', () => {
-    it('should break out of loop when cancelled mid-iteration', async () => {
-      const abortController = new AbortController()
-
-      const loopStartNode = createMockNode('loop-start', 'loop_sentinel')
-      loopStartNode.metadata = { isSentinel: true, sentinelType: 'start', loopId: 'loop1' }
-
-      const loopBodyNode = createMockNode('loop-body', 'function')
-      loopBodyNode.metadata = { isLoopNode: true, loopId: 'loop1' }
-
-      const loopEndNode = createMockNode('loop-end', 'loop_sentinel')
-      loopEndNode.metadata = { isSentinel: true, sentinelType: 'end', loopId: 'loop1' }
-
-      loopStartNode.outgoingEdges.set('edge1', { target: 'loop-body' })
-      loopBodyNode.outgoingEdges.set('edge2', { target: 'loop-end' })
-      loopEndNode.outgoingEdges.set('loop_continue', {
-        target: 'loop-start',
-        sourceHandle: 'loop_continue',
-      })
-
-      const dag = createMockDAG([loopStartNode, loopBodyNode, loopEndNode])
-      const context = createMockContext({ abortSignal: abortController.signal })
-
-      let iterationCount = 0
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'loop-start') return ['loop-body']
-        if (node.id === 'loop-body') return ['loop-end']
-        if (node.id === 'loop-end') {
-          iterationCount++
-          if (iterationCount === 3) abortController.abort()
-          return ['loop-start']
-        }
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator(5)
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('loop-start')
-
-      expect(result.status).toBe('cancelled')
-      expect(iterationCount).toBeLessThan(100)
-    })
-  })
-
-  describe('Parallel execution with cancellation', () => {
-    it('should stop queueing parallel branches when cancelled', async () => {
-      const abortController = new AbortController()
-
-      const startNode = createMockNode('start', 'starter')
-      const parallelNodes = Array.from({ length: 10 }, (_, i) =>
-        createMockNode(`parallel${i}`, 'function')
-      )
-
-      parallelNodes.forEach((_, i) => {
-        startNode.outgoingEdges.set(`edge${i}`, { target: `parallel${i}` })
-      })
-
-      const dag = createMockDAG([startNode, ...parallelNodes])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'start') {
-          return parallelNodes.map((_, i) => `parallel${i}`)
-        }
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator(50)
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-
-      const executionPromise = engine.run('start')
-      setTimeout(() => abortController.abort(), 30)
-
-      const result = await executionPromise
-
-      expect(result.status).toBe('cancelled')
-      expect(nodeOrchestrator.executionCount).toBeLessThan(11)
-    })
-
-    it('should not wait for all parallel branches when cancelled', async () => {
-      const abortController = new AbortController()
-
-      const startNode = createMockNode('start', 'starter')
-      const slowNodes = Array.from({ length: 5 }, (_, i) => createMockNode(`slow${i}`, 'function'))
-
-      slowNodes.forEach((_, i) => {
-        startNode.outgoingEdges.set(`edge${i}`, { target: `slow${i}` })
-      })
-
-      const dag = createMockDAG([startNode, ...slowNodes])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'start') return slowNodes.map((_, i) => `slow${i}`)
-        return []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator(200)
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-
-      const executionPromise = engine.run('start')
-      setTimeout(() => abortController.abort(), 50)
-
-      const startTime = Date.now()
-      const result = await executionPromise
-      const duration = Date.now() - startTime
-
-      expect(result.status).toBe('cancelled')
-      expect(duration).toBeLessThan(500)
-    })
-  })
-
-  describe('Edge cases', () => {
-    it('should handle empty DAG gracefully', async () => {
-      const dag = createMockDAG([])
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run()
-
-      expect(result.success).toBe(true)
-      expect(nodeOrchestrator.executionCount).toBe(0)
-    })
-
-    it('should preserve partial output when cancelled', async () => {
-      const abortController = new AbortController()
-
-      const startNode = createMockNode('start', 'starter')
-      const endNode = createMockNode('end', 'function')
-      endNode.outgoingEdges = new Map()
-
-      startNode.outgoingEdges.set('edge1', { target: 'end' })
-
-      const dag = createMockDAG([startNode, endNode])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'start') return ['end']
-        return []
-      })
-
-      const nodeOrchestrator = {
-        executionCount: 0,
-        executeNode: vi.fn().mockImplementation(async (_ctx: ExecutionContext, nodeId: string) => {
-          if (nodeId === 'start') {
-            return { nodeId: 'start', output: { startData: 'value' }, isFinalOutput: false }
-          }
-          abortController.abort()
-          return { nodeId: 'end', output: { endData: 'value' }, isFinalOutput: true }
-        }),
-        handleNodeCompletion: vi.fn(),
-      } as unknown as MockNodeOrchestrator
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.status).toBe('cancelled')
-      expect(result.output).toBeDefined()
-    })
-
-    it('should populate metadata on cancellation', async () => {
-      const abortController = new AbortController()
-      abortController.abort()
-
-      const startNode = createMockNode('start', 'starter')
-      const dag = createMockDAG([startNode])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.metadata).toBeDefined()
-      expect(result.metadata.endTime).toBeDefined()
-      expect(result.metadata.duration).toBeDefined()
-    })
-
-    it('should return logs even when cancelled', async () => {
-      const abortController = new AbortController()
-
-      const startNode = createMockNode('start', 'starter')
-      const dag = createMockDAG([startNode])
-      const context = createMockContext({ abortSignal: abortController.signal })
-      context.blockLogs.push({
-        blockId: 'test',
-        blockName: 'Test',
-        blockType: 'test',
-        startedAt: '',
-        endedAt: '',
-        durationMs: 0,
-        success: true,
-      })
-
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      abortController.abort()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('start')
-
-      expect(result.logs).toBeDefined()
-      expect(result.logs.length).toBeGreaterThan(0)
-    })
-  })
-
-  describe('Cancellation flag behavior', () => {
-    it('should set cancelledFlag when abort signal fires', async () => {
-      const abortController = new AbortController()
-
-      const nodes = Array.from({ length: 3 }, (_, i) => createMockNode(`node${i}`, 'function'))
-      for (let i = 0; i < nodes.length - 1; i++) {
-        nodes[i].outgoingEdges.set(`e${i}`, { target: `node${i + 1}` })
-      }
-
-      const dag = createMockDAG(nodes)
-      const context = createMockContext({ abortSignal: abortController.signal })
-      const edgeManager = createMockEdgeManager((node) => {
-        if (node.id === 'node0') {
-          abortController.abort()
-          return ['node1']
-        }
-        return node.id === 'node1' ? ['node2'] : []
-      })
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      const result = await engine.run('node0')
-
-      expect(result.status).toBe('cancelled')
-    })
-
-    it('should cache Redis cancellation result', async () => {
-      ;(isRedisCancellationEnabled as Mock).mockReturnValue(true)
-      ;(isExecutionCancelled as Mock).mockResolvedValue(true)
-
-      const nodes = Array.from({ length: 5 }, (_, i) => createMockNode(`node${i}`, 'function'))
-      const dag = createMockDAG(nodes)
-      const context = createMockContext()
-      const edgeManager = createMockEdgeManager()
-      const nodeOrchestrator = createMockNodeOrchestrator()
-
-      const engine = new ExecutionEngine(context, dag, edgeManager, nodeOrchestrator)
-      await engine.run('node0')
-
-      expect((isExecutionCancelled as Mock).mock.calls.length).toBeLessThanOrEqual(3)
-    })
-  })
-})
--- a/apps/sim/executor/execution/engine.ts
+++ b/apps/sim/executor/execution/engine.ts
@@ -28,8 +28,6 @@ export class ExecutionEngine {
  private lastCancellationCheck = 0
  private readonly useRedisCancellation: boolean
  private readonly CANCELLATION_CHECK_INTERVAL_MS = 500
-  private abortPromise: Promise<void> | null = null
-  private abortResolve: (() => void) | null = null

  constructor(
    private context: ExecutionContext,
@@ -39,34 +37,6 @@ export class ExecutionEngine {
  ) {
    this.allowResumeTriggers = this.context.metadata.resumeFromSnapshot === true
    this.useRedisCancellation = isRedisCancellationEnabled() && !!this.context.executionId
-    this.initializeAbortHandler()
-  }
-
-  /**
-   * Sets up a single abort promise that can be reused throughout execution.
-   * This avoids creating multiple event listeners and potential memory leaks.
-   */
-  private initializeAbortHandler(): void {
-    if (!this.context.abortSignal) return
-
-    if (this.context.abortSignal.aborted) {
-      this.cancelledFlag = true
-      this.abortPromise = Promise.resolve()
-      return
-    }
-
-    this.abortPromise = new Promise<void>((resolve) => {
-      this.abortResolve = resolve
-    })
-
-    this.context.abortSignal.addEventListener(
-      'abort',
-      () => {
-        this.cancelledFlag = true
-        this.abortResolve?.()
-      },
-      { once: true }
-    )
  }

  private async checkCancellation(): Promise<boolean> {
@@ -103,15 +73,12 @@ export class ExecutionEngine {
      this.initializeQueue(triggerBlockId)

      while (this.hasWork()) {
-        if (await this.checkCancellation()) {
+        if ((await this.checkCancellation()) && this.executing.size === 0) {
          break
        }
        await this.processQueue()
      }
-
-      if (!this.cancelledFlag) {
-        await this.waitForAllExecutions()
-      }
+      await this.waitForAllExecutions()

      if (this.pausedBlocks.size > 0) {
        return this.buildPausedResult(startTime)
@@ -197,7 +164,11 @@ export class ExecutionEngine {

  private trackExecution(promise: Promise<void>): void {
    this.executing.add(promise)
-    promise.catch(() => {})
+    // Attach error handler to prevent unhandled rejection warnings
+    // The actual error handling happens in waitForAllExecutions/waitForAnyExecution
+    promise.catch(() => {
+      // Error will be properly handled by Promise.all/Promise.race in wait methods
+    })
    promise.finally(() => {
      this.executing.delete(promise)
    })
@@ -205,30 +176,12 @@ export class ExecutionEngine {

  private async waitForAnyExecution(): Promise<void> {
    if (this.executing.size > 0) {
-      const abortPromise = this.getAbortPromise()
-      if (abortPromise) {
-        await Promise.race([...this.executing, abortPromise])
-      } else {
-        await Promise.race(this.executing)
-      }
+      await Promise.race(this.executing)
    }
  }

  private async waitForAllExecutions(): Promise<void> {
-    const abortPromise = this.getAbortPromise()
-    if (abortPromise) {
-      await Promise.race([Promise.all(this.executing), abortPromise])
-    } else {
-      await Promise.all(this.executing)
-    }
-  }
-
-  /**
-   * Returns the cached abort promise. This is safe to call multiple times
-   * as it reuses the same promise instance created during initialization.
-   */
-  private getAbortPromise(): Promise<void> | null {
-    return this.abortPromise
+    await Promise.all(Array.from(this.executing))
  }

  private async withQueueLock<T>(fn: () => Promise<T> | T): Promise<T> {
@@ -324,7 +277,7 @@ export class ExecutionEngine {
      this.trackExecution(promise)
    }

-    if (this.executing.size > 0 && !this.cancelledFlag) {
+    if (this.executing.size > 0) {
      await this.waitForAnyExecution()
    }
  }
@@ -383,6 +336,7 @@ export class ExecutionEngine {

    this.addMultipleToQueue(readyNodes)

+    // Check for dynamically added nodes (e.g., from parallel expansion)
    if (this.context.pendingDynamicNodes && this.context.pendingDynamicNodes.length > 0) {
      const dynamicNodes = this.context.pendingDynamicNodes
      this.context.pendingDynamicNodes = []
--- a/apps/sim/lib/messaging/email/mailer.ts
+++ b/apps/sim/lib/messaging/email/mailer.ts
@@ -152,15 +152,20 @@ function addUnsubscribeData(
 ): UnsubscribeData {
  const unsubscribeToken = generateUnsubscribeToken(recipientEmail, emailType)
  const baseUrl = getBaseUrl()
-  const unsubscribeUrl = `${baseUrl}/unsubscribe?token=${unsubscribeToken}&email=${encodeURIComponent(recipientEmail)}`
+  const encodedEmail = encodeURIComponent(recipientEmail)
+  const unsubscribeUrl = `${baseUrl}/unsubscribe?token=${unsubscribeToken}&email=${encodedEmail}`

  return {
    headers: {
      'List-Unsubscribe': `<${unsubscribeUrl}>`,
      'List-Unsubscribe-Post': 'List-Unsubscribe=One-Click',
    },
-    html: html?.replace(/\{\{UNSUBSCRIBE_TOKEN\}\}/g, unsubscribeToken),
-    text: text?.replace(/\{\{UNSUBSCRIBE_TOKEN\}\}/g, unsubscribeToken),
+    html: html
+      ?.replace(/\{\{UNSUBSCRIBE_TOKEN\}\}/g, unsubscribeToken)
+      .replace(/\{\{UNSUBSCRIBE_EMAIL\}\}/g, encodedEmail),
+    text: text
+      ?.replace(/\{\{UNSUBSCRIBE_TOKEN\}\}/g, unsubscribeToken)
+      .replace(/\{\{UNSUBSCRIBE_EMAIL\}\}/g, encodedEmail),
  }
 }

@@ -361,15 +366,15 @@ async function sendBatchWithResend(emails: EmailOptions[]): Promise<BatchSendEma
      subject: email.subject,
    }

-    if (email.html) emailData.html = email.html
-    if (email.text) emailData.text = email.text
-
    if (includeUnsubscribe && emailType !== 'transactional') {
      const primaryEmail = Array.isArray(email.to) ? email.to[0] : email.to
      const unsubData = addUnsubscribeData(primaryEmail, emailType, email.html, email.text)
      emailData.headers = unsubData.headers
      if (unsubData.html) emailData.html = unsubData.html
      if (unsubData.text) emailData.text = unsubData.text
+    } else {
+      if (email.html) emailData.html = email.html
+      if (email.text) emailData.text = email.text
    }

    batchEmails.push(emailData)
--- a/apps/sim/lib/messaging/email/unsubscribe.test.ts
+++ b/apps/sim/lib/messaging/email/unsubscribe.test.ts
@@ -114,17 +114,15 @@ describe('unsubscribe utilities', () => {
    })

    it.concurrent('should handle legacy tokens (2 parts) and default to marketing', () => {
-      // Generate a real legacy token using the actual hashing logic to ensure backward compatibility
      const salt = 'abc123'
      const secret = 'test-secret-key'
      const { createHash } = require('crypto')
      const hash = createHash('sha256').update(`${testEmail}:${salt}:${secret}`).digest('hex')
      const legacyToken = `${salt}:${hash}`

-      // This should return valid since we're using the actual legacy format properly
      const result = verifyUnsubscribeToken(testEmail, legacyToken)
      expect(result.valid).toBe(true)
-      expect(result.emailType).toBe('marketing') // Should default to marketing for legacy tokens
+      expect(result.emailType).toBe('marketing')
    })

    it.concurrent('should reject malformed tokens', () => {
@@ -226,7 +224,6 @@ describe('unsubscribe utilities', () => {
    it('should update email preferences for existing user', async () => {
      const userId = 'user-123'

-      // Mock finding the user
      mockDb.select.mockReturnValueOnce({
        from: vi.fn().mockReturnValue({
          where: vi.fn().mockReturnValue({
@@ -235,7 +232,6 @@ describe('unsubscribe utilities', () => {
        }),
      })

-      // Mock getting existing settings
      mockDb.select.mockReturnValueOnce({
        from: vi.fn().mockReturnValue({
          where: vi.fn().mockReturnValue({
@@ -244,7 +240,6 @@ describe('unsubscribe utilities', () => {
        }),
      })

-      // Mock insert with upsert
      mockDb.insert.mockReturnValue({
        values: vi.fn().mockReturnValue({
          onConflictDoUpdate: vi.fn().mockResolvedValue(undefined),
@@ -300,7 +295,6 @@ describe('unsubscribe utilities', () => {

      await updateEmailPreferences(testEmail, { unsubscribeMarketing: true })

-      // Verify that the merged preferences are passed
      expect(mockInsertValues).toHaveBeenCalledWith(
        expect.objectContaining({
          emailPreferences: {
--- a/apps/sim/lib/messaging/email/unsubscribe.ts
+++ b/apps/sim/lib/messaging/email/unsubscribe.ts
@@ -38,7 +38,6 @@ export function verifyUnsubscribeToken(
    const parts = token.split(':')
    if (parts.length < 2) return { valid: false }

-    // Handle legacy tokens (without email type)
    if (parts.length === 2) {
      const [salt, expectedHash] = parts
      const hash = createHash('sha256')
@@ -48,7 +47,6 @@ export function verifyUnsubscribeToken(
      return { valid: hash === expectedHash, emailType: 'marketing' }
    }

-    // Handle new tokens (with email type)
    const [salt, expectedHash, emailType] = parts
    if (!salt || !expectedHash || !emailType) return { valid: false }

@@ -101,7 +99,6 @@ export async function updateEmailPreferences(
  preferences: EmailPreferences
 ): Promise<boolean> {
  try {
-    // First, find the user
    const userResult = await db
      .select({ id: user.id })
      .from(user)
@@ -115,7 +112,6 @@ export async function updateEmailPreferences(

    const userId = userResult[0].id

-    // Get existing email preferences
    const existingSettings = await db
      .select({ emailPreferences: settings.emailPreferences })
      .from(settings)
@@ -127,13 +123,11 @@ export async function updateEmailPreferences(
      currentEmailPreferences = (existingSettings[0].emailPreferences as EmailPreferences) || {}
    }

-    // Merge email preferences
    const updatedEmailPreferences = {
      ...currentEmailPreferences,
      ...preferences,
    }

-    // Upsert settings
    await db
      .insert(settings)
      .values({
@@ -168,10 +162,8 @@ export async function isUnsubscribed(
    const preferences = await getEmailPreferences(email)
    if (!preferences) return false

-    // Check unsubscribe all first
    if (preferences.unsubscribeAll) return true

-    // Check specific type
    switch (emailType) {
      case 'marketing':
        return preferences.unsubscribeMarketing || false