# 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**

```ts
// 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**

```bash
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**

```ts
// 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**

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

Expected: All 5 tests PASS

- [ ] **Step 5: Commit**

```bash
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):
```ts
import { isSyntheticEmail } from '@/shared/lib/is-synthetic-email'
```

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

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

The full relevant section should look like:
```tsx
<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**

```bash
cd client && npm run lint
```

Expected: No errors

- [ ] **Step 3: Commit**

```bash
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):
```ts
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):
```ts
const user = useUnit($user)
```

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

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

The full relevant section should look like:
```tsx
<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**

```bash
cd client && npm run lint
```

Expected: No errors

- [ ] **Step 3: Commit**

```bash
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**

```bash
cd client && npm test
```

Expected: All tests PASS

- [ ] **Step 2: Run lint and format check**

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

Expected: No errors

- [ ] **Step 3: Run TypeScript check**

```bash
cd client && npx tsc --noEmit
```

Expected: No errors