Личный b2b-кабинет корпоративного клиента с возможностью переключения аккаунтов и объединения компаний

Современный B2B-кабинет должен обеспечить оптовым клиентам автономный процесс закупок 24/7. Мы повысили удобство пользования b2b-кабинетом контрагентам: добавлен новый блок регистрации с возможностью переключения аккаунтов и объединения компаний. 

• Теперь пользователи могут переключаться между ролями, такими как «Представитель компании» и «Владелец компании», каждая из которых обладает своим набором прав.
• Кроме того, был создан общий бонусный баланс компании, который объединяет покупки разных сотрудников, представляющих одну компанию.

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

Проблемы при регистрации и авторизации

Наш клиент, ООО «ТД Кама» — дистрибьютор продукции брендов Viatti, КАМА, KAMA PRO, KAMA EURO и других, которые экспортируются в 37 стран. Рассказали, как развиваем интернет-магазина шинной продукции kamatyres.shop.

Изначально существовала проблема неверного разделения аккаунтов между юридическими и физическими лицами. Один и тот же человек мог быть и представителем компании, и физическим лицом, но вынужден был создавать два или более аккаунта. Это приводило к дублированию аккаунтов и путанице. 

С введением начисления бонусов за регистрацию компаний данная проблема стала более острой, система также допускала повторное начисление бонусов одной и той же компании, если разные сотрудники регистрировались от её имени.

Поставленная задача

Необходимо было решить следующие задачи:

1. Создать отдельную сущность «Компания» с необходимым набором данных для оформления заказов. Чтобы дальше всю информацию, связанную с компанией хранить в одном месте. Информация, которая хранится: Реквизиты компании, контактные данные владельца, представителей компании, общий бонусный баланс, менеджеров компании, которые сопровождают сделки и прочие технические данные. 
2. Разработать функционал, чтобы один аккаунт мог использоваться и как физическое, и как юридическое лицо нескольких компаний.
3. Добавить роли внутри компании: Владелец компании и Представитель.
4. Обеспечить владельцам компаний возможность управлять сотрудниками: приглашать, удалять и редактировать представителей компании, обновлять контактные данные организации.
5. Объединить бонусные балансы разных пользователей в рамках одной компании. По правилам бонусной программы начисление приветственных бонусных баллов осуществлялось, если компания первый раз регистрировалась в интернет-магазине. Но до реализации данной задачи была проблема, что несколько представителей компании могли зарегистрировать на свой аккаунт одну и ту же компанию и получить приветственные бонусы, что нарушало правила бонусной программы. 

Работу над задачами разделили на этапы

Аналитика. Провели анализ бизнес-требований и поведенческих факторов пользователей, изучение затрагиваемых блоков сайта. 

Техническое задание. Без подробного ТЗ невозможно было корректно разработать схему взаимодействия между пользователем и сайтом. Построили новую схему работы авторизации, рассмотрели все возможные варианты ввода данных пользователем, подробно описали варианты взаимодействия пользователя с каждым экраном авторизации. 

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

Верстка и JavaScript. Разметка новых и корректировка старых страниц. На проекте используется много внешних npm-зависимостей для различных решений, это код сторонних разработчиков, доступа к которому напрямую нет. При написание JS необходимо было исключить дублирование кода для различной логики, чтобы не  увеличивать итоговый файл сборки. Также убрали неиспользуемые стили, чтобы уменьшить вес итоговых файлов. 

Программирование. Интеграция верстки с бэкендом, написание скриптов для импорта компаний, назначения владельцев и объединения бонусных балансов.

Тестирование. Провели комплексное тестирование с акцентом на основные функции сайта: авторизация, оформление заказа, распределение бонусов. Блок авторизации является одним из основных блоков на сайте и от правильности, стабильности и удобства его работы напрямую  зависит конверсия сайта и количество заказов. Тестирование проводилось в два этапа: сначала на тестовой среде разработки, далее на боевом сайте. Можно выделить следующие этапы тестирования: 

1. Первым делом мы проверяли корректность верстки у новых блоков на различных экранах (мобильная, планшетная и десктопные версии), адаптацию элементов под все возможные разрешения мониторов. 
2. Вторым этапом требовалось проверить корректность логики авторизации. Тут за основу мы брали техническое задание и поэтапно по нему сверяли процесс авторизации в различных сценариях. Всего при тестировании было разобрано порядка 90 различных сценариев. 

После этих этапов мы произвели комплексное тестирование всего сайта на предмет ошибок, которые могли возникнуть в результате модификации кода под новую авторизацию. 

На этапе тестирования как раз была выявлена проблема у менеджеров юридических лиц, про которую расскажем далее.

Решение задач

Создание сущности «Компания»

Настроили хайлоад-блок для хранения данных компании и её бонусного баланса. Чтобы администратор магазина мог работать с базой компаний и в случае необходимости вносить корректировки в компании из административной части, было решено строить таблицу на базе хайлоад-блока. Внедрение данного хайлод-блока в дальнейшем потребовало переписать часть кода на страницах: Заказы, Клиенты, Оформление заказа, Авторизация, чтобы данные тянулись именно с этой таблицы.

Добавление ролей и настройка авторизации

В аккаунте пользователя добавили характеристики «Владелец ИНН/Список ИНН» для связи с компаниями. По данным полям определяем какими компаниями пользователь владеет, а в каких является представителем. А также опцию выбора, от лица какой компании будет оформлен заказ.

Новые функции личного кабинета

Добавили новые страницы для управления компанией и представителями, где владельцы компаний могут редактировать контактные данные компании, удалять и изменять представителей. Также владельцы могут приглашать представителей с помощью генерации ссылок-приглашений на авторизацию.

Бонусный баланс и история заказов

Достаточно трудозатратным оказался блок объединения бонусного баланса, истории бонусного баланса, а также истории заказов. На бэкенде потребовалось полностью переделать выдачу информации для данных страниц, пагинацию, фильтры на странице заказов таким образом, чтобы в истории заказов и истории бонусов у компании была возможность видеть историю всех заказов компании, а не только своего аккаунта.

Полностью переработана выдача информации о бонусах и истории заказов компании. Теперь история доступна на уровне всей компании, а не только отдельного аккаунта.

Сложности реализации

На этапе тестирования и отладки мы заметили нарушение работы интернет-магазина у отдельной группы пользователей: Менеджеры юридических лиц. Стало понятно, что нарушения связаны с изменением места хранения данных о  компаний (переносе их в хайлоад-блок).

Решение: потребовалось внести изменения в интерфейс и функции менеджеров интернет-магазина Kamatyres.shop, так как менеджеры оформляли заказы от лица других компаний (юр.лицо звонит менеджеру и просит оформить заказ, менеджер заходит на сайт и от лица клиента оформляет заказ).

Также была выявлена сложность с бонусами за регистрацию компании. Решение: настроить условие, при котором бонус выдавался только единожды, чтобы новым клиентам после каждого удаления компании не начислялись ошибочные приветственные бонусы . Для этого добавили правило, проверяющее наличие ИНН в истории баланса. Этот подход помог избежать повторного начисления бонусов, а предыдущие компании были внесены в историю бонусов посредством скрипта. 

Результат

Мы значительно улучшили функционал интернет-магазина для B2B-сегмента. Пользователи теперь могут оформлять заказы от лица разных компаний, а разделение на физическое лицо, сотрудника и компанию стало более логичным. Правила начисления бонусов также были пересмотрены, что помогает поддерживать актуальную клиентскую базу без дублирования аккаунтов.

Выводы и рекомендации

Наиболее правильным при первоначальной разработке интернет-магазина продумывать логику работы с B2B-сегментом на самых ранних этапах, даже если такая необходимость не предполагается сразу. Рекомендуем всегда поддерживать базу клиентов наиболее полной, чистой и актуальной. В будущем это позволит избежать массу багов, нестандартных кастомизаций и лишних доработок.

Чтобы в уже действующий интернет-магазин встроить b2b-функционал, нам понадобилось на этапе аналитики тщательно изучить бизнес логику компании, взаимодействие всех типов пользователей с сайтом и построить детальную схему работы авторизации. 

Перед запуском сделайте большое акцент на тестирование и доработку, если авторизация реализована через SMS-сервис, то заранее подготовьте сервис временных номеров для QA специалиста, где можно получить номера для тестирования на которые будут приходить SMS или используйте внутренние номера компании.