Blink Transfers

01Задача

Blink Transfers возит пассажиров из аэропорта, круизного порта и на мероприятия по Барселоне и Каталонии. Компании нужен был сайт, на котором клиент сам, без переписки с менеджером, указывает маршрут, сразу видит цену, выбирает машину и платит.

02Как устроен сайт

Сайт написан на Next.js, API — на Laravel с базой MySQL, а админка — React-приложение внутри Laravel. Бронь начинается с формы поездки: откуда и куда, дата и время, при желании обратный путь со своими адресами. В почасовом режиме вместо адреса назначения выбирается длительность. Дальше четыре шага — выбор машины, пассажиры и багаж (взрослые, дети двух возрастов с детскими креслами, три размера багажа), данные пассажира и оплата. Сводка с маршрутом, машинами и итоговой суммой всё время видна рядом, под шагами — карта маршрута на Leaflet с линией по дорогам от OSRM, а поездку можно изменить, не начиная бронь заново.

Машины показаны карточками с фото, вместимостью и ценой для этого маршрута; можно взять сразу несколько. Оплата — картой прямо на сайте или через PayPal, оба способа проводятся через API PayPal на сервере. Отели, апартаменты и турагентства оформляют заявку по отдельному сценарию: три шага и без оплаты, а в своём кабинете видят статистику и скачивают ваучеры. Клиент находит свои брони по email с одноразовым кодом и скачивает там счёт и ваучер. Интерфейс и тексты брони переведены на пять языков, анимация текста — на GSAP, сайт ставится на телефон как приложение (PWA).

03Технические решения

В брони несколько связанных форм, а кнопка шага лежит вне формы, поэтому я сделал свой слой форм на Zustand: поля регистрируются в общем хранилище, у каждого типа поля свой валидатор, ошибка хранится как ключ перевода и сразу показывается на нужном языке. Данные всех шагов живут в одном хранилище — возврат назад ничего не стирает, а смена языка посреди оформления сохраняет введённое. Шаги определяются по имени, а не по номеру, поэтому партнёрский сценарий собран из тех же шагов без последнего.

Адреса ищутся через серверный маршрут Next.js с ограничением частоты запросов: ключ Google не попадает в браузер, результаты Places Autocomplete и Text Search объединяются, очищаются от дублей и фильтруются по региону, аэропорты помечаются отдельно. Цена в браузере не считается — фронтенд получает длину маршрута через Distance Matrix и отправляет её с координатами в API, а сервер выбирает тариф: для поездок из аэропорта и в аэропорт — по зонам, которые в админке рисуются на карте, для остальных — по шкале километров, для почасовой аренды — по часам. На экране показывается только цена, которую вернул сервер. Вебхуки PayPal сервер принимает только после проверки подписи у самого PayPal, после оплаты выписывает счёт с НДС со сквозной нумерацией без пропусков, а о новых бронях приходят уведомления в Telegram.

04Результат

Сайт работает на английском, испанском, каталанском, немецком и русском: blinktransfers.com. Бронь от выбора маршрута до оплаты оформляется на сайте, без участия менеджера.