Данная анкета была разработана для автоматизации заключения договоров с платежной системой PayU. Цель - упростить заполнение анкет для клиентов и обработку обращений для менеджеров компании.
Перед нами были поставлены следующие задачи:
Одним из самых сложных этапов работы в этом проекте - была обработка технического задания и поиск решения. Для этого у нас был список полей формы от команды PayU и три анкеты в текстовом документе - для ИП, Юр. Лиц, и Микрофинансовых организаций, которые появились позже.
Мы разрабатывали различные блок-схемы, отображающие зависимости полей, поведение формы при выборе различных значений, этапы заполнения анкеты для пользователя, обсуждали их с представителями PayU по скайпу и e-mail, чтобы добиться максимальной эффективности. Это помогло нам выбрать правильное решение для проекта, найти компромисс между удобством для пользователя, потребностями менеджеров и техническими возможностями инструментов разработки.
Параллельно с этим велись работы по верстке формы, написанию кода js (который был основным инструментом проекта, ведь все изменения должны были происходить на "лету") и серверной части (на долю которой приходилось сообщение со сторонним сервером Контур.Фокуса, хранение данных о пользователя и документов, отправка их на электронную почту PayU, формирование pdf документов самой анкеты и политики конфиденциальности).
В работе с проектом мы прошли много этапов, результаты которых мы демонстрировали с помощью видео-конференций команде PayU, после чего версия шла на тестирование компанией. Так мы выясняли потребности менеджеров, бухгалтеров и юристов PayU, и дорабатывали анкету, чтобы удовлетворить их.
В результате мы имеем многофункциональную и гибкую форму для заключения договоров с новыми клиентами компании PayU.
Мы сделали форму через которую менеджер может сгенерировать персональную ссылку и пароль клиента для начала работы.
При переходе по полученной ссылке, пользователь видит форму авторизации, которая запрашивает пароль к анкете и дает возможность запомнить его.
Если пароль верен, система покажет анкету. Как можно заметить из скриншота, вся форма имеет три раздела - сама анкета пользователя, настройки (здесь указываются потребности в функционале платежной формы, предоставляемой компанией PayU), и документы, где расположены кнопки для прикрепления сканов, необходимых для заключения договора.
Все подблоки свернуты и заблокированы, т.к. только после заполнения доступных полей мы получим необходимую информацию о пользователе, чтобы сформировать следующие состояния формы. Остановимся подрбнее на разделе Анкеты. Пользователю предлагается ввести свой ИНН, чтобы продолжить работу. Рассмотрим на примере компании Ипол.
После ввода ИНН, мы уже знаем, что компания является Юр.лицом и получаем регистрационную информацию о компании из Контур.Фокуса, которой заполняем часть полей анкеты. Эти поля пользователь не может редактировать. Все подблоки станут доступны, и развернется первый из них - Общие сведения, при этом курсор установится в первом доступном поле ввода.
Мы постарались предусмотреть любое поведение пользователя. К примеру, если заполнитель решит отредактировать поле ИНН (изменить его или вовсе удалить данные), форма вернется к предыдущему состоянию, пока не получит новые корректные данные в этом поле.
В анкете есть возможность дублировать некоторые поля ввода. Так, например, у пользователя может возникнуть потребность добавить не один url своего интернет-магазина, в этом случае он может продублировать необходимое поле ввода столько раз, сколько нужно. Или убрать лишние поля.
Иногда в выпадающих списках или чек-листах нет удовлетворяющего пользователя пункта. Поэтому в каждом выборе вариантов, где эта ситуация возможна, предусмотрен нейтральный пункт "иное", при его выборе, открывается текстовое поле, в котором предлагается ввести недостающий вариант.
В анкете есть поля, необходимость которых зависит от заполнения других полей или от выбора вариантов. Иногда это целые дополнительные анкеты, например, анкета для микрофинансовой организации, для иностранного налогоплательщика или данные представителя Предприятия при подписании договора.
Поля анкеты имеют маски и ограничения на ввод символов.
Валидация формы происходит на лету. Если пользователь, начал заполнять поле, но заполнил его не корректно или оставил пустым, он получит предупреждение в виде подсказки и подсветки поля красным цветом. То же произойдет со всеми полями, не пошедшими валидацию, при попытке отправить форму, фокус остановится на первом невалидном поле.
Если все поля блока анкеты заполнены верно, иконка блока станет зеленой. Это сделано для того, чтобы заполнение такой длинной формы было максимально комфортным. Анкета может заполняться в несколько подходов или разными сотрудниками одной компании, так что такая подсветка помогает при каждом открытии анкеты быстро ориентироваться в том, какой информации не хватает для заключения договора.
Заполнять форму в несколько подходов позволяет автосохранение данных. Сохраняется только корректная информация, так что риск случайно удалить введенные ранее данные существенно снижена.
После того, как анкета полностью заполнена, можно скачать ее в формате pdf для печати. Автоматически заполняется не только информация, полученная из Контур.Фокуса, но и поля для подписи в pdf анкеты, и название компании в согласии на обработку данных, которое так же генерируется автоматически в формате pdf.
Раздел "Документы" опционален. Он предназначен для тех пользователей, которым удобно заключить договор онлайн. Обязательный набор документов зависит от того, кто будет подписывать договор - руководитель компании или ее представитель. Информация об этом берется из заполненной анкеты пользователя. Так же есть возможность прикрепить дополнительно скан Отчетности и Договора. Или убрать их.
Прикрепленный документ сразу же сохраняется на сервере. Пользователь может посмотреть его в новом окне, чтобы убедиться, что прикреплен нужный файл, или заменить его при необходимости.
Когда все обязательные документы прикреплены, одним нажатием кнопки, они будут отправлены на почту PayU для дальнейшей работы, с ссылкой на анкету пользователя, его ИНН и адресами его магазинов.
Кроме того, дополнительно мы создали простую административную панель, со списком анкет. В списке отображается идентификатор клиента, даты заполнения и отправки данных на электронную почту. Здесь же реализовано сохранение анкет в формате xml. После выгрузки, данные анкеты удаляются. Не выгруженные анкеты, вместе со всеми данными, хранятся на сервере в течении трех месяцев, после чего автоматически удаляются системой, как не актуальные.
