SPA React приложение. пошаговый widget записи
25 000 руб. за проект
Требование к кандидатам
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. Виджет должен авторизоваться под своим токеном
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. Виджет должен авторизоваться под своим токеном
- Файлы
В заказе есть исполнитель
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.