В основном модуль уже готов, нужно сверстать календарь (согласно готовому дизайну), добавить одну функцию и ряд мелких исправлений. Обязательно все должно быть сделано с помощью React.js (с помощью функций и хуков).
Теперь подробнее.
Речь о модуле бронирования на сайте san-utes.ru (сам сайт трогать не надо)
Новый модуль заменит существующий. Ссылка на старый модуль: san-utes.ru/booking
Back end уже готов (во всяком случае мы делать его не будем), все новые изменения должны быть связаны с существующим API, для понимая его работы существует тестовый букинг: booking.san-utes.ru/index.html конечно же дадим доступ к его админке.
Но нюанс, технического описания API нет, доступа к исходному коду нет. Нужно будет понимать как работает API на примере тестовой системы (еще раз ссылка, такая же как выше) booking.san-utes.ru/index.html (используя DevTools). Можно задавать вопросы по поводу API, они будут переадресовываться разработчикам. В целом неудобно да, задали много вопросов клиенту по этому поводу. Клиент ссылается на то что он сам ничего не понимает, говорит про бюрократию, и что бэкендом занимается сторонняя контора которая доступ к API давать не хочет, но она предоставила тестовое приложение. Ничего страшного в целом, основная работа уже сделана, так что много копаться не придется!:)
Готовый дизайн:
https://www.figma.com/file/JuAbxyUcY8jtizWDTKK0xo/booking-hotel?node-id=0%3A1
Ссылка на то что готово по фронтэнду (с тестовыми данными):
https://fex.net/uk/s/nlknrsa
(прикрепил тот же файл к проекту)
Что нужно доделать конкретно:
Выбор дат (это схематическое название раздела, к которому относится список правок ниже)
1. Сверстать календарь как в дизайне
2. Заменить иконки календарей, на иконки как в дизайне
3. При выборе количества взрослых, сделать так чтоб при повторном выборе из списка не пропадал вариант который уже выбрали
4. В датах писать месяца прописью: 11 сентября, 23 мая, сейчас там непривычное для нас порядок: "месяц, дата, год", так быть не должно, только дата цифрой и месяц прописью
5. Сделать так, чтоб нельзя было днем выезда выбрать тот же день, что и день заезда, только день после дня заезда и дальше.
Выбор номеров
1. Заменить знак рубля на знак без засечек, как в дизайне, здесь и дальше где появляется знак рубля, он должен выглядеть одинаково
2. В превью номера, есть место с тремя вещами которыми оснащается номер: Фен, Кондиционер, Двуспальная кровать к примеру, если третий пункт не помещается, то он должен размываться, как это показано в дизайне
Выбор тарифа
1. В "условиях отмены" сделать шрифт и размер таким же как в описании под названием тарифа, добавить немного воздуха внутри плашки вокруг текста, выровнять текст по левому краю
2. Сделать кнопку "к номерам" так же как в дизайне
Заполнение данных
1. Сделать так, чтоб номер форматировался при вводе, "+" должен сразу быть, код страны, код оператора и сам номер должны разделятся. Количество вводимых знаков нужно ограничить, сейчас там бесконечно цифры вводить можно.
2. Вместо кнопки "к номерам" там должна быть кнопка "выбрать еще один номер" как в дизайне, она должна возвращать нас к выбору номеров, где будут забиты те же данные и то же кол-во гостей, что и в первом номере, но при желании их должно быть возможно поменять, и когда мы выберем номер, в разделе заполнения данных будет уже два номера (Это функция есть в тестовом букинге, но еще не реализована в нашем приложении)
3. Заменить:
"Фактом бронирования вы соглашаетесь с обработкой персональных данных и политикой конфиденциальности и пользовательским соглашением"
На:
"Фактом бронирования вы соглашаетесь на обработку предоставленных вами персональных данных. Согласно Федеральному закону "О персональных данных" от 27.07.2006 N 152-ФЗ"
и ссылок не надо
Общие моменты:
1. Проверить все ли данные номера можно форматировать через админку, если что-то нет, то это нужно исправить (речь идет о том, чтоб через админку можно было добавлять новые номера (апартаменты) и они корректно отображались в приложении, можно будет в админке создать тестовый номер, чтоб было проще в этом разобраться (напоминаю доступ к админке конечно же дадим)
2. Проверить реагирует ли приложение на данные из URL (В том случае если человек зашел в букинг через главную страницу сайта, тогда оно должно отображать в URL параметры которые ввел человек и приложение должно их подхватить) (дополнительно это объясним позже)
Скину позже все материалы что есть, которые должны помочь в работе, но сейчас думаю достаточно информации чтоб понять суть работы.
