w-funnel/AGE_SYSTEM.md

🎂 Система работы с возрастом WitLab Funnel

Описание

Универсальная система автоматического расчета возраста и определения поколений из даты рождения пользователя. Интегрируется с системой вариативности для создания возрастных условий навигации.

Возможности

🎯 Автоматический расчет из даты:

• Точный возраст (например: 25, 30, 45 лет)
• Возрастные группы (18-21, 22-25, 26-30, 31-35, 36-40, 41-45, 46-50, 51-60, 60+)
• Поколения (Generation Z, Millennials, Generation X, Boomers, Silent Generation)
• Комбинации со знаками зодиака

🎨 Красивый UI для админки:

• Селектор возрастных групп с описаниями
• Селектор поколений с иконками
• Возможность добавлять кастомные диапазоны
• Живое превью выбранных условий

Технические детали

📊 Возрастные группы:

export const AGE_GROUPS = [
  { id: "18-21", name: "18-21 год", min: 18, max: 21, description: "Студенческий возраст" },
  { id: "22-25", name: "22-25 лет", min: 22, max: 25, description: "Молодые профессионалы" },
  { id: "26-30", name: "26-30 лет", min: 26, max: 30, description: "Карьерный рост" },
  { id: "31-35", name: "31-35 лет", min: 31, max: 35, description: "Становление личности" },
  { id: "36-40", name: "36-40 лет", min: 36, max: 40, description: "Зрелость и стабильность" },
  { id: "41-45", name: "41-45 лет", min: 41, max: 45, description: "Средний возраст" },
  { id: "46-50", name: "46-50 лет", min: 46, max: 50, description: "Жизненный опыт" },
  { id: "51-60", name: "51-60 лет", min: 51, max: 60, description: "Зрелые отношения" },
  { id: "60+", name: "60+ лет", min: 60, max: 120, description: "Золотой возраст" },
] as const;

🚀 Поколения:

export const GENERATION_GROUPS = [
  { id: "gen-z", name: "Поколение Z", minYear: 1997, maxYear: 2012, description: "Цифровые аборигены" },
  { id: "millennials", name: "Миллениалы", minYear: 1981, maxYear: 1996, description: "Поколение интернета" },
  { id: "gen-x", name: "Поколение X", minYear: 1965, maxYear: 1980, description: "Поколение перемен" },
  { id: "boomers", name: "Бумеры", minYear: 1946, maxYear: 1964, description: "Послевоенное поколение" },
  { id: "silent", name: "Молчаливое поколение", minYear: 1928, maxYear: 1945, description: "Довоенное поколение" },
] as const;

⚡ Основные функции:

1. Расчет возраста:

// Из даты рождения
calculateAge(new Date(1987, 3, 8)); // → 36

// Из массива [month, day, year]
calculateAgeFromArray([4, 8, 1987]); // → 36

2. Определение группы:

getAgeGroup(25); // → { id: "22-25", name: "22-25 лет", ... }
getGeneration(1987); // → { id: "millennials", name: "Миллениалы", ... }

3. Создание значений для навигации:

createAgeValue(25); // → "22-25"
createGenerationValue(1987); // → "millennials"

Использование в вариативности

📅 Date экраны автоматически:

Когда пользователь вводит дату рождения в date экране, система автоматически добавляет к ответам:

Пример: Дата рождения 8 апреля 1987 года [4, 8, 1987]

Автоматически добавляется в ответы:

[
  "4", "8", "1987",        // Исходная дата
  "36-40",                 // Возрастная группа  
  "age-36",                // Точный возраст
  "millennials",           // Поколение
  "aries"                  // Знак зодиака (из существующей системы)
]

🎯 Условия навигации:

По возрастным группам:

{
  "conditions": [{
    "screenId": "birth-date",
    "conditionType": "values",
    "operator": "includesAny", 
    "values": ["22-25", "26-30"]
  }]
}

По поколениям:

{
  "conditions": [{
    "screenId": "birth-date",
    "conditionType": "values",
    "operator": "equals",
    "values": ["millennials"]
  }]
}

Комбинированные условия:

{
  "conditions": [
    {
      "screenId": "birth-date",
      "conditionType": "values",
      "operator": "includesAny",
      "values": ["gen-z", "millennials"]
    },
    {
      "screenId": "birth-date", 
      "conditionType": "values",
      "operator": "includesAny",
      "values": ["aries", "leo", "sagittarius"]
    }
  ]
}

UI компоненты

🎨 AgeSelector для админки:

<AgeSelector
  selectedValues={["22-25", "millennials"]}
  onToggleValue={(value) => console.log('Selected:', value)}
  onAddCustomValue={(value) => console.log('Added:', value)}
/>

Возможности:

• 🎂 Сетка возрастных групп с описаниями
• 🚀 Список поколений с иконками
• 🎯 Поле для кастомных диапазонов (25-35, 40+)
• 📋 Превью выбранных значений с цветовым кодированием

📊 Интеграция в ScreenVariantsConfig:

Для date экранов автоматически показываются:

1. AgeSelector - для возрастных условий
2. ZodiacSelector - для знаков зодиака
3. Умная фильтрация - каждый селектор показывает только свои значения

Примеры использования

💖 Романтические предпочтения по возрасту:

{
  "id": "young-romance",
  "variants": [{
    "conditions": [{
      "screenId": "birth-date",
      "conditionType": "values",
      "operator": "includesAny",
      "values": ["18-21", "22-25"]
    }],
    "overrides": {
      "title": { "text": "Найти **молодую любовь**!" },
      "description": { "text": "Специально для **молодых сердец** - найдем твою половинку среди сверстников!" }
    }
  }]
}

🚀 Карьерные амбиции по поколениям:

{
  "id": "career-focus",
  "variants": [{
    "conditions": [{
      "screenId": "birth-date", 
      "conditionType": "values",
      "operator": "equals",
      "values": ["millennials"]
    }],
    "overrides": {
      "title": { "text": "Карьера + **отношения**" },
      "description": { "text": "Для **миллениалов** - найдем партнера, который поддержит твои амбиции!" }
    }
  }]
}

🎯 Зрелые отношения:

{
  "id": "mature-love",
  "variants": [{
    "conditions": [{
      "screenId": "birth-date",
      "conditionType": "values", 
      "operator": "includesAny",
      "values": ["46-50", "51-60", "60+"]
    }],
    "overrides": {
      "title": { "text": "**Зрелая любовь**" },
      "description": { "text": "Для тех, кто знает цену **настоящим чувствам** и **жизненному опыту**" }
    }
  }]
}

Архитектура

📁 Файловая структура:

src/lib/age-utils.ts              # Основные утилиты возраста
src/components/admin/builder/
  ├── AgeSelector.tsx             # UI селектор для админки  
  ├── AgeDemo.tsx                 # Демо компонент
  └── ScreenVariantsConfig.tsx    # Интеграция в вариативность
src/lib/funnel/navigation.ts     # Интеграция в навигацию

🔧 Интеграция в систему:

1. Автоматический расчет (navigation.ts):

// При получении ответов из date экрана автоматически добавляем:
const age = calculateAgeFromArray(dateArray);
const ageGroup = createAgeValue(age);
const generation = createGenerationValue(year);
const zodiac = getZodiacSign(month, day);

enhancedAnswers.push(ageGroup, `age-${age}`, generation, zodiac);

2. UI селекция (AgeSelector.tsx):

// Красивые карточки для выбора условий
{AGE_GROUPS.map((group) => (
  <button onClick={() => onToggleValue(group.id)}>
    🎂 {group.name} - {group.description}
  </button>
))}

3. Валидация диапазонов:

// Проверка попадания возраста в диапазон
isAgeInRange(25, "22-25"); // → true
isAgeInRange(30, "18-21"); // → false

Преимущества

✅ Автоматизация:

• Пользователь вводит только дату рождения
• Система автоматически рассчитывает все значения
• Не нужно спрашивать возраст отдельно

✅ Гибкость:

• Поддержка любых возрастных диапазонов
• Кастомные значения (25-35, 40+)
• Комбинации с другими условиями

✅ UX дружелюбность:

• Понятные названия групп
• Описания для каждой группы
• Иконки для поколений
• Превью выбранных условий

✅ Маркетинговая сегментация:

• Готовые возрастные группы для таргетинга
• Поколенческая сегментация
• Психологические портреты по возрасту

Совместимость

• ✅ React 18+
• ✅ TypeScript 5+
• ✅ Next.js 14+
• ✅ Существующая система зодиака
• ✅ Система вариативности
• ✅ Обратная совместимость с существующими воронками

💡 Теперь можно создавать условия навигации на основе возраста пользователя, автоматически рассчитанного из даты рождения!