Кофемания: Delivery Hub
Рабочее место операторов доставки «Кофемании»: заказы со всех каналов в одной ленте в реальном времени, карточка заказа с отправкой в кухню и курьерскую службу, приём телефонных заказов и отчёты для шефов.
Проект под NDA — детали архитектуры и код готов разобрать голосом.
Результат
- 6
- каналов заказов в одной ленте: сайт и приложение, Яндекс Еда, Delivery Club, Сбер, MirCity и заказ за столом
- 115
- задач закрыто в трекере: 76 багов и 39 доработок по запросам операторов
- 15
- месяцев единственным фронтенд-разработчиком продукта — с ноября 2023 по февраль 2025
Экраны продукта
Лента заказов и карточка заказа на одном экране. Статус можно сменить вручную — например, если заказ уже пробит в кассе и повторно отправлять его не нужно.
Виджет входящих звонков в редакторе заказа: оператор принимает звонок, и телефон гостя сразу подставляется в форму.
Шаг «О госте»: профиль подтягивается по телефону вместе с уровнем в программе лояльности, комментарием и адресами; ресторан, время и стоимость доставки считаются по адресу.
Карточка блюда: варианты приготовления, модификаторы, КБЖУ и остаток в ресторане. Можно добавить несколько позиций подряд, не закрывая окно.
Меню ресторана для оператора — таблица с остатками, весом, ценой и SKU. Блюда из стоп-листа подсвечены, корзина с комментарием к заказу справа.
Оформление: способ оплаты, списание баллов через холд, платные приборы, «оставить у двери» и ручная стоимость доставки.
Отчёты оператора и шефа за период: сортировка по колонкам с учётом типа данных и выгрузка в Excel.
Задача бизнеса
Заказы на доставку приходят в «Кофеманию» отовсюду: собственные сайт и приложение, Яндекс Еда, Delivery Club, Сбер, MirCity, заказы гостей за столом и звонки на линию доставки. Операторам нужен был один экран вместо старого хаба: видеть новые заказы по всем ресторанам сразу, понимать, какой заказ опаздывает или не оплачен, двигать его по статусам, передавать в кассу iiko и курьерам White Cabs — и тут же оформлять заказ по телефону, не теряя гостя на линии. Данные меняются каждую минуту, поэтому экран не может жить на ручном обновлении.
Моя роль
Единственный фронтенд-разработчик третьей версии хаба с ноября 2023 по февраль 2025: 326 из 327 коммитов во фронтенд. Бэкенд на .NET и SignalR писала соседняя команда, контракт событий согласовывали вместе. Собрал с нуля раздел отчётов, ленту и карточку заказа, редактор заказа, поиск гостя и историю; провёл редизайн весной 2024 и закрыл 115 задач из трекера — 76 багов и 39 доработок от операторов.
Решение
SPA на React, TypeScript и Vite, состояние на Effector и Patronum. Все живые данные идут через одно соединение SignalR с автоматическим переподключением: клиент вызывает методы хаба, а серверные события попадают прямо в события Effector — новая страница ленты, обновлённая карточка, результат отправки в iiko. Новый заказ приходит сам и сопровождается звуковым сигналом; REST остался только для авторизации и отчётов. В ленте — фильтр по ресторану, вкладки заказов, предзаказов и Cake Buro, поиск с debounce, сортировка по колонкам и пагинация; строка подсвечивает превышение времени готовки, опоздание, заказ ко времени, недоплату и нерассчитанную доставку. Карточка заказа собирает гостя (день рождения сегодня или завтра, первый ли заказ, комментарий о госте), адрес с копированием, блюда с модификаторами и комплиментами, ссылки на оплату и действия: следующий статус, ручная смена статуса без отправки в кассу, переотправка в iiko, чек сборки, печать стикеров, передача в White Cabs. Редактор заказа — мастер из трёх шагов: виджет входящих звонков подставляет телефон и профиль гостя с сохранёнными адресами; новый адрес проверяется подсказками DaData и зоной доставки, ресторан, стоимость и время доставки считаются по адресу, можно выбрать интервал ко времени или особое меню. Меню ресторана — плотная таблица с остатками, весом, SKU, стоп-листом и поиском, который не различает «е/ё» и «и/й». Редактирование существующего заказа идёт через черновик-форк, который сливается с оригиналом при сохранении, а уход из редактора без сохранения перехватывается. Отчёты оператора и шефа сортируются по типизированным колонкам и выгружаются в Excel. Сборка — Docker и GitLab CI с ветками dev, qa и main.