Загальна інформація

• Дизайн готується для впровадження на Bootstrap (адаптивна верстка).

• Всі стилі та візуальна логіка мають відповідати стилю сайту: https://aquapartners.weblium.site/

• Колірна схема, кнопки, шрифти — у єдиному стилі з цим сайтом.

У вкладенні є візуалізація кожного екрану, виконана в Paint примірного дизайну, який необхідно для верстальника на Bootstrap зробити у Фігмі. 

Екран 1 — Іконка віджета

Функціональність:

• Простий віджет для вставки на будь який сайт, без порушення стилів сайту.

• Кнопка для відкриття віджету розміщується справа і веде до Екрану 2.

Екран 2 — Вхід у систему / початок оформлення

Ціль: Ввести логін і пароль для переходу до оформлення замовлення або обрати "Замовити без реєстрації".

Блоки:

• Заголовок: "Для оформлення замовлення введіть Ваш Логін і Пароль"

• Поле для логіну

• Поле для пароля

• Кнопка «Увійти»

• Посилання: «Забули дані для входу?», «Зареєструватись…» веде в тетелграм чат

• Кнопка неактивна «Замовити без реєстрації» 

• Внизу: фраза з посиланням — "Продовжуючи, я даю згоду на обробку персональних даних"

Екран 3 — Введення інформації про отримувача

Ціль: Ввести ПІБ, email, телефон, адресу доставки.

Блоки:

• Ваше ім’я

• E-mail

• Номер телефону

• Список активних адрес (з радіокнопкою вибору, наприклад: Адреса 1, Адреса 2)

• У кожному блоці адреси:

  • Місто

  • Вулиця + будинок

  • Під’їзд, поверх, квартира / офіс, домофон / код

• Кнопка «Додати нову адресу» внизу

Екран 3.1 — Особистий кабінет клієнта (історія замовлень)

Функціональність:

• Відображення балансу грошей і тари (борг/переплата)

• Статистика: кількість замовлень

• Інформація про останнє замовлення: список товарів, кількість, сума, водій, адреса

• Кнопка: «Повторити останнє замовлення»

• Кнопка: «Оформити нове замовлення» (веде на Екран 4)

Екран 4 — Вибір товарів

Ціль: Обрати товари для нового замовлення

Блоки:

• Випадаючий список із категоріями товарів

• Обрані товари зі списку: назва, кількість +/-, ціна, кнопка «Х» (видалити)

• Сума замовлення

• Знижка (якщо є)

• До сплати

• Баланс (переплата/борг)

• Кнопка: «Далі»

Екран 4.1 — Деталі доставки та оплати

Ціль: Обрати дату, час, спосіб оплати, залишити коментар

Блоки:

• Вибір дати (доступні наступні 2 дні + кнопка вибору іншої дати)

• Вибір часу (за замовчуванням: 08:00–21:00, або обрати інтервал)

• Спосіб оплати (використовуються лише ці варіанти):

  • Готівкою

  • Б/Н карткою

  • Б/Н по договору

  • Термінал

• Поле для коментаря

• Кнопка «Оформити замовлення»

Екран 5 — Перевірка замовлення

Ціль: Перегляд введених даних перед підтвердженням

Блоки:

• Адреса доставки (з можливістю змінити)

• Телефон, дата доставки, час, спосіб оплати

• Перелік товарів, кількість, ціна

• Підсумок: знижка, усього до сплати

• Коментар до замовлення (відображається)

• Кнопка «Назад»

• Кнопка «Підтвердити»

Екран 6 — Помилка при оформленні

Ціль: Показати причину, чому замовлення не було оформлено

Контент:

• Заголовок: «Замовлення не оформлено»

• Текст із вказаною причиною (наприклад: мінімальна кількість товарів типу «Обладнання»: 3)

• Ілюстрація з попереджувальним знаком

• Кнопка «Назад»

Екран 7 — Замовлення підтверджено

Ціль: Повідомити користувача про успішне оформлення

Контент:

• Номер замовлення

• Текст: «Замовлення оформлено. Очікуйте доставку у вказаний час»

• Ілюстрація з підтвердженням

• Кнопка «Зрозуміло»