SPA React приложение. пошаговый widget записи

25 000 руб. за проект
09 сентября 2019, 14:13 • 5 откликов • 79 просмотров
Требование к кандидатам
1. Есть отзывы
2. Есть опыт и портфолио
3. Готовность работать через безопасную сделку

Виджет должен стартовать с параметрами
:
1. busines - id бизнеса системы
2. subsidiary - guid филиала в который будет добавляться запись

Виджет будет пошаговый. Для отображения шагов берем Steps компонент https://ant.design/components/steps/
Результат каждого шага необходимо отражать в Redux.
Форма должна строится через antd Form

После перехода с первого шага, пользователь может вернутся назад, данные на каждом шаге должны остаться сохраненными.

Описание шагов виджета:
1. Идентификация клиента
На первом шаге пользователю показывается форма с полями:
- Фамилия (до 128 символов)
- Имя (до 128 символов)
- Телефон
Кнопка "далее"

Для телефона нужно использовать компонент https://www.npmjs.com/package/react-ph...mber-input

После нажатия на кнопку, происходит валидация данных и происходит отправка запроса в API.
Сперва уходит запрос на поиск клиента по номеру телефона:
GET /api/v1/clients?phone=891032465487
Телефон передается только цифрами, без скобок, пробелов и т.п.

Если клиент найден то дальше используется GUID этого клиента.
Если клиент не найден, то уходит запрос на добавление клиента:
POST /api/v1/clients
{
"name": "Имя",
"surname": "Фамилия",
"phone": 891032465487,
}

В ответ придет GUID клиента, который необходимо использовать дальше


2. Выбор автомобиля клиента, либо добавление нового.

Если клиент найден, то подгружается список найденных автомобилей клиента
GET /api/v1/clients/{GUID}/cars

Клиент может выбрать один из его уже имеющихся автомобилей.

Также у клиента есть возможность добавить новый автомобиль. И затем выбрать его.

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

POST /api/v1/car_clients
{
"number": "string",
"client": "string",
"model": {},
"description": "string"
}

после того как автомобиль выбран становится доступна кнопка "Далее".
После нажатия на нее запоминается GUID авомобиля, модель, и номер.

3. Выбор услуг
Далее пользователь может отметить список услуг на которые он записывается.
Запрос в АПИ:
GET /api/v1/products?widget=true

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

После выбора хотя бы одной услуги появляется кнопка "далее"

4. Выбор времени и ресурса

Отображается календарь с доступным временем на которое можно записаться. Запросы в апи будут предоставлены кандидатам.


5. Подтверждение

Выводится суммарная информация со всех шагов, пользователь подтверждает ее, и отправляется запрос в апи

POST /api/v1/orders

После успешного выполнения запроса, пользователю показывается уведомление

"Спасибо в ближайшее время с вами свяжется менеджер"


Основные тезисы по виджету:
1. Поддержка IE 11 и выше
2. Виджет не должен затирать или конфликтовать с библиотеками которые есть на сайтах где он запускается.
4. Виджет должен авторизоваться под своим токеном
Файлы