1. Рефакторинг

Решение →

2. Платёжный терминал пополнения счёта

https://zmnv.ru/payment-terminal

Функционал:

Ввести номер, сумму и оплатить
Добавить/удалить провайдера в список

Используется:

Особенности

Для создания «базы» использовался генератор проектов angular-cli с поддержкой SCSS, после чего конфигурация была расширена для HMR. Порт по-умолчанию заменён на 3010.
В development и production билдах используются разные адреса к API серверу с мок-данными.
«Боевая» версия «платёжного терминала» расположена на VDS сервере и запускается с помощью PM2. Настроен HTTPS с nginx.
Доступ к http-запросам только через сервис mocks.service.ts
Перехватчик http-запросов: GET-запросы кэшируются на 30 секунд.

Обмен данными

В момент отправки запроса «активированная» кнопка заменяется на индикатор загрузки до тех пор, пока состояние запроса не изменится.

Для непонятных ситуаций предусмотрено отлавливание ошибок и их индикация в интерфейсе, с возможностью совершить требуемое действие повторно, «не отходя от кассы».

Для взаимодействия с mock-данными используется REST-API с помощью json-server. В development версии проекта используется командой npm run mocks, которая запускает сервер на 3011 порту.

Для «опознания» данных используются интерфейсы — модель данных провайдера и отправляемых данных при оплате.

В задании было сказано добавить вероятность ошибки при попытке оплатить, не указано где именно. Поэтому просто сделал через случайное число от 0.0 до 1.0 прямо в функции рядом с get запросом и выдаю разные адреса до API -> шанс 50/50.

Форма оплаты

Общие черты

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

Удобные мелочи

Мышка не обязательна. Можно пополнить счёт, используя только клавиатуру — Tab, Enter/Space и т.д.
Автофокус на номере телефона при загрузке страницы (не совсем страницы).
Поля номера и суммы платежа input type="tel". На мобильных устройствах фокус на поле будет вызывать клавиатуру только с нужными знаками.
Отслеживание вводимой суммы платежа. Число выше требуемого преобразуется в максимальное (1 000 руб), отрицательное — в единицу (1 руб).
Для ввода номера телефона используется маска +7 (000) 000 00 00 с помощью ngx-mask.
При заполнении номера телефона полностью происходит смена фокуса на поле суммы оплаты.
Поле номера телефона имеет идентификатор, который позволяет повторить платёж через некоторое время без ввода номера полностью, а подставить из списка уже вводимых номеров.

Принцип работы валидации формы

Создается форма с полями phone и price.
Валидация происходит постоянно при обновлении состояния формы.
При отправки формы — валидация, затем индикация валидаций.
Индикация валидации отображается только после попытки отправить форму.
После первой попытки отправки формы — индикация отображается каждый раз при обновлении состояния формы.

PS

В задании требовалось сделать 2 экрана. Я бы решил эту задачу вообще без выбора провайдера. Его можно определять по номеру. Либо сделать список частью формы на 1 экране без роутинга.

Некоторый код написал «в базовом стиле». Например, в том же app.modules.ts, я мог разбить декларируемые компоненты на отдельные объекты, импортировать группами и т.д. Но в задаче чётко прописана цель данного приложения и что оно будет делать. Судя по ней, нет необходимости в усложнении структуры кода в подобных местах.

Я не стал писать тесты. Не очень часто с ними работал. Но если подумать... Форма валидируется, состояние соединения отображается, все проверки видно и так. Уточните этот вопрос, если нужно.

Обновлять Angular до 6 версии пока тоже не стал, оставил какую выдали постабильней при генерации проекта. Обвновляется одной коммандой, поэтому если надо — сообщите.

zmnv / payment-terminal