shop-server/docs/superpowers/plans/2026-05-24-synthetic-email-warning.md

Synthetic Email Warning Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Display informational alerts in the personal account when the user's email is synthetic (e.g., vk_<id>@vk.local), informing them they cannot receive email notifications.

Architecture: Pure client-side utility checks email against known synthetic domains. Two MUI Alert components conditionally render in AuthMethodsSection and NotificationsPage.

Tech Stack: TypeScript, React, MUI (Alert component), Vitest

---

Task 1: Create isSyntheticEmail utility

Files:

• Create: client/src/shared/lib/is-synthetic-email.ts

• Test: client/src/shared/lib/__tests__/is-synthetic-email.test.ts

• Step 1: Write the failing test

// client/src/shared/lib/__tests__/is-synthetic-email.test.ts
import { describe, expect, it } from 'vitest'
import { isSyntheticEmail } from '../is-synthetic-email'

describe('isSyntheticEmail', () => {
  it('returns true for vk.local domain', () => {
    expect(isSyntheticEmail('vk_12345@vk.local')).toBe(true)
  })

  it('returns false for real email', () => {
    expect(isSyntheticEmail('user@gmail.com')).toBe(false)
  })

  it('returns false for yandex email', () => {
    expect(isSyntheticEmail('user@yandex.ru')).toBe(false)
  })

  it('returns false for empty string', () => {
    expect(isSyntheticEmail('')).toBe(false)
  })

  it('returns false for email with vk.local as part of username', () => {
    expect(isSyntheticEmail('vk.local@gmail.com')).toBe(false)
  })
})

• Step 2: Run test to verify it fails

cd client && npx vitest run src/shared/lib/__tests__/is-synthetic-email.test.ts

Expected: FAIL with "Cannot find module '../is-synthetic-email'"

• Step 3: Write the implementation

// client/src/shared/lib/is-synthetic-email.ts
const SYNTHETIC_DOMAINS = ['vk.local']

export function isSyntheticEmail(email: string): boolean {
  return SYNTHETIC_DOMAINS.some((domain) => email.endsWith(`@${domain}`))
}

• Step 4: Run test to verify it passes

cd client && npx vitest run src/shared/lib/__tests__/is-synthetic-email.test.ts

Expected: All 5 tests PASS

• Step 5: Commit

cd /mnt/d/my_projects/shop
git add client/src/shared/lib/is-synthetic-email.ts client/src/shared/lib/__tests__/is-synthetic-email.test.ts
git commit -m "feat: add isSyntheticEmail utility for detecting synthetic OAuth emails"

---

Task 2: Add warning to AuthMethodsSection

Files:

• Modify: client/src/pages/me/ui/sections/AuthMethodsSection.tsx

• Step 1: Add import and Alert below email display

Add import at line 22 (after existing imports):

import { isSyntheticEmail } from '@/shared/lib/is-synthetic-email'

Add Alert block after line 118 ({user.email}), before line 120 ({!verificationUrl && ():

{isSyntheticEmail(user.email) && (
  <Alert severity="info" sx={{ mb: 2 }}>
    Ваша почта сгенерирована автоматически. Без указания реальной почты вы не сможете получать уведомления о заказах.
  </Alert>
)}

The full relevant section should look like:

<Typography sx={{ mb: 2 }} color="text.secondary">
  {user.email}
</Typography>

{isSyntheticEmail(user.email) && (
  <Alert severity="info" sx={{ mb: 2 }}>
    Ваша почта сгенерирована автоматически. Без указания реальной почты вы не сможете получать уведомления о заказах.
  </Alert>
)}

{!verificationUrl && (

• Step 2: Verify lint passes

cd client && npm run lint

Expected: No errors

• Step 3: Commit

cd /mnt/d/my_projects/shop
git add client/src/pages/me/ui/sections/AuthMethodsSection.tsx
git commit -m "feat: show synthetic email warning in AuthMethodsSection"

---

Task 3: Add warning to NotificationsPage

Files:

• Modify: client/src/pages/me/ui/sections/NotificationsPage.tsx

• Step 1: Add import, user access, and Alert at page top

Add import at line 13 (after existing imports):

import { $user } from '@/shared/model/auth'
import { useUnit } from 'effector-react'
import { isSyntheticEmail } from '@/shared/lib/is-synthetic-email'

Add user hook inside the component, after const [error, setError] = useState<string | null>(null) (line 28):

const user = useUnit($user)

Add Alert block after line 64 (after the subtitle Typography), before line 66 ({error && ():

{user && isSyntheticEmail(user.email) && (
  <Alert severity="info" sx={{ mb: 2 }}>
    Ваша почта сгенерирована автоматически. Для получения уведомлений укажите реальную почту в настройках профиля.
  </Alert>
)}

The full relevant section should look like:

<Typography color="text.secondary" sx={{ mb: 3 }}>
  Настройте, какие уведомления вы хотите получать на почту.
</Typography>

{user && isSyntheticEmail(user.email) && (
  <Alert severity="info" sx={{ mb: 2 }}>
    Ваша почта сгенерирована автоматически. Для получения уведомлений укажите реальную почту в настройках профиля.
  </Alert>
)}

{error && (

• Step 2: Verify lint passes

cd client && npm run lint

Expected: No errors

• Step 3: Commit

cd /mnt/d/my_projects/shop
git add client/src/pages/me/ui/sections/NotificationsPage.tsx
git commit -m "feat: show synthetic email warning in NotificationsPage"

---

Task 4: Final verification

• Step 1: Run full client test suite

cd client && npm test

Expected: All tests PASS

• Step 2: Run lint and format check

cd client && npm run lint && npm run format:check

Expected: No errors

• Step 3: Run TypeScript check

cd client && npx tsc --noEmit

Expected: No errors