пва

2026-05-24 12:45:54 +05:00
parent 755e9dcad3
commit 75841342c6
1 changed files with 227 additions and 0 deletions
@@ -0,0 +1,227 @@
+# 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