Мобильное приложение

Пользоваться сервисами стало удобнее
заказы | статусы | оплата | доставка

Да Нет

Главная
IT разработка
Инструкция по эксплуатации мобильного приложения BIANCA

1. Требования к аппаратному и программному обеспечению

1.1. Требования к клиентской части

Только авторизованный пользователь имеет доступ к функциям и контенту приложения. Если пользователь уже регистрировался или авторизовался на данном устройстве, то система должна запомнить его логин и не требовать от пользователя повторной авторизации.

За одним устройством работает один пользователь. Работа одного пользователя одновременно на нескольких устройствах не предусмотрена.

После авторизации пользователя сохраняются данные (токен) для осуществления дальнейших запросов. Данные сохраняются в рамках одной сессии.

Если складывается такая ситуация, что пользователь устанавливает приложение и при первом запуске у него нет интернета, то он не сможет увидеть контент. Такое поведение допускается.

В том случае, если пользователь уже зарегистрировался, но у него отсутствует интернет соединение, то отображается предупреждение (рисунок 3.2).

В том случае, если у пользователя при первом запуске отсутствует интернет соединение и контент не был ранее загружен, то на экране отображается соответствующее сообщение (рисунок 3.2).

Рисунок 1.1 - Прототип экрана приложения с сообщением об отсутствии данных при первом запуске

В момент загрузки контента необходимо отображать пользователю процесс загрузки в виде специального троббера (рисунок 3.3).

Рисунок 1.2 - Прототип экрана “Главная” с троббером

2. Требования к ОС для мобильного приложения

2.1. Android

Разрабатываемое мобильное приложение должно корректно (согласно ТЗ) работать на смартфонах с операционной системой android с версии: 6.0 до 10.0.

2.2. IOS

Разрабатываемое мобильное приложение должно корректно (согласно ТЗ) работать на смартфонах с операционной системой IOS начиная с версии 12.0.0 и до 13.1.1.

2.3 Размеры экрана для устройств на ОС Android

Работа мобильного приложения на платформе android, гарантирована на устройствах отвечающих следующим требованиям:

● Плотность экрана:

○ MDPI - Portrait: 320 x 480 px;

○ HDPI - Portrait: 480 x 800 px;

○ XHDPI - Portrait: 720 x 1280 px;

○ XXHDPI - Portrait: 960 x 1600 px;

○ XXXHDPI - Portrait: 1280 x 1920 px.

● Конфигурация экрана относительно масштаба:

○ Normal.

2.3.1. Размеры экрана для устройств на ОС IOS

Список IOS устройств, на которых гарантирована работа приложения представлен в таблице 3.

Таблица 3. Список поддерживаемых IOS устройств.

	Устройство	Диагональ экрана (в дюймах)	Разрешение экрана (в пикселях)	PPI
1	Apple iPhone 6S	4.7	1334×750	326
2	Apple iPhone 6S Plus	5.5	1920×1080	401
3	Apple iPhone 7	4.7	1334×750	326
4	Apple iPhone 7 Plus	5.5	1920×1080	401
5	Apple iPhone SE	4	1136×640	326
6	Apple iPhone 8	4.7	1334 x 750	326
7	Apple iPhone 8 Plus	5.5	1920 x 1080	401
8	Apple iPhone Xr	6.1	1792 x 828	326
9	Apple iPhone X	5.8	2436 x 1125	458
10	Apple iPhone Xs	5.8	2436 x 1125	458
11	Apple iPhone Xs Max	6.5	2688 x 1242	458
12	Apple iPhone 11	6,1	1792×828	326
13	Apple iPhone 11 Pro	5.8	2436×1125	458
14	Apple iPhone 11 Pro MAX	6,5	2688×1242	458
15	Apple Iphone SE 2	4,7	1334 x 750	326

3. Требования к локализации

Разрабатывается русскоязычная версия системы, все прочие локализации не предусмотрены.

4. Требования к ориентации

Поддерживаются только портретная ориентация экрана. Смена ориентации экрана не предусмотрена.

5. Требования к сбору статистики

Сбор статистики приложения осуществляется при помощи сервиса Firebase. Просмотреть статистические данные работы приложения можно в административной панели Firebase.

В интерфейсе сервиса Firebase, администратор имеет возможность просматривать следующую статистику работы приложения:

- количество зарегистрированных пользователей за определенный период;

- количество активных пользователей приложения.

6. Перечень разделов

В данном списке определены основные разделы реализующие механизмы вариантов использования системы объединенные по смежному функционалу согласно макетам.

1. Загрузка приложения.

2. Приветственные экраны.

3. Регистрация и Авторизация.

4. Главная.

5. Сториз.

6. Пункты приема.

7. Быстрое оформление заказа.

8. Создание заказа из корзины.

9. История заказов.

10. Управление вещами на хранении.

11. Профиль.

12. Услуги.

13. Уведомления.

14. Чат.

15. Слайдер фотографий.

7. Описание работы с приложением

7.1. Загрузка приложения

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.1.

Рисунок 7.1 - Экран раздела Загрузка приложения

Данный экран является стартовым экраном приложения и служит для визуального отображения процесса загрузки приложения и компонентов приложения.

7.2. Основные преимущества

Данный раздел отображается пользователю только при первом запуске приложения. Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.2.

Рисунок 7.2 - Экран раздела Основные преимущества

Основным функционалом данного раздела является предоставление пользователю в виде карточек степпера основных преимуществ использования приложения и системы в целом (рисунок 7.2). Карточка степпера включает в себя:

1. Изображение

2. Заголовок

3. Описание

4. Кнопка “Вперед к чистоте”.

5. Кнопка “Пропустить”.

В случае нажатия на кнопку “Вперед к чистоте” пользователь переходит на следующую карточку степпера.

В случае нажатия на кнопку “Пропустить” пользователь перенаправляется в раздел Регистрация и Авторизация на экран ввода номера телефона.

7.3. Регистрация и Авторизация

Только авторизованный пользователь имеет доступ к функциям и контенту приложения. Если пользователь уже регистрировался или авторизовался на данном устройстве, то система должна запомнить его данные и не требовать повторной авторизации.

Если пользователь зашел повторно после переустановки приложения или вышел из текущей учетной записи, то пользователь попадает на экран Основные преимущества (рисунок 7.2).

7.3.1. Экран ввода номера телефона

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.3.

Рисунок 7.3 - Экран ввода номера телефона раздела Регистрация и Авторизация

7.3.2. Экран ввода кода подтверждения

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.4.

Рисунок 7.4 - Экран ввода кода подтверждения

Рисунок 7.5. - Экран подтверждения контактных данных

Рисунок 7.6. - Экран создания аккаунта

Рисунок 7.7. - экраны подтверждения контактных данных

После того, как пользователь корректно ввел номер телефона и код подтверждения, и введенный пользователем номер телефона присутствовал в системе, то пользователь попадает на экран подтверждения контактных данных (рисунок 7.7).

На экране отображается введенный пользователем номер телефона с предыдущего шага. Также приложение автоматически предоставляет пользователю форму для подтверждения контактных данных.

Форма подтверждения контактных данных представляет собой сообщение с запросом на подтверждение имени и фамилии пользователя, и соответствующие кнопки “Да” “Нет” для осуществления ответа.

В случае, если пользователь подтверждает контактные данные, путем нажатия на кнопку “Да”, то пользователь авторизируется и происходит перенаправление на главный экран в раздел Главная (Рисунок 7.8). Иначе, если пользователь не подтверждает контактные данные, путем нажатия на кнопку “Нет”, то происходит перенаправление на следующий экран, на котором в зависимости от ответа пользователем определяется существование пользователя в системе.

Рисунок 7.8. - Главный экран

Рисунок 7.9 - Экран ввода контактных данных

В случае если пользователь подтверждает существование в системе, путем нажатия на кнопку “Да”, то осуществляется перенаправление пользователя на экран ввода контактных данных (Рисунок 7.9). Иначе, если пользователь не подтверждает свое существование в системе, путем нажатия на кнопку “Нет”, то в таком случае пользователь перенаправляется на экран создания аккаунта (Рисунок 7.6).

7.3.4. Экран создания аккаунта

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.6.

На текущем экране отображается номер телефона к которому в рамках данного функционала будут привязаны Имя и Фамилия пользователя. Также отображается форма создания аккаунта.

Форма создания аккаунта включает в себя поля:

- Фамилия - представляет собой поле для ввода фамилии пользователя, длинной до 50 символов. Является обязательным для заполнения.

- Имя - представляет собой поле для ввода имени пользователя, длинной до 50 символов. Является обязательным для заполнения.

Также форма ввода контактных данных имеет кнопку “Сохранить”.

7.4 Навигация по основным разделам приложения

Навигация в приложении состоит из нижней панели (тап-бар). Структурное представление внешнего вида тап-бара и расположения элементов на нем отображено на Рисунке 7.10.

Рисунок 7.10. - Навигационный тап-бар по основным разделам приложения

● Главная. По тапу осуществляется переход в раздел “Главная”.

● Уведомления. По тапу осуществляется переход в раздел “Уведомления”;

● Чат. По тапу осуществляется переход в раздел “Чат”;

● Пункты приема. По тапу осуществляется переход в раздел “Пункты приема”;

● Еще. По тапу осуществляется переход в раздел Заказы

7.5 Главная

Только авторизованный пользователь имеет доступ к функциям и контенту данного раздела. Если пользователь уже регистрировался или авторизовался на данном устройстве, то приложение автоматически осуществляет перенаправление пользователя в текущий раздел на экран главная(Рисунок 7.11).

7.5.1 Экран главная

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.11.

Рисунок 7.11. - Экран главная

Текущий экран разделен на 4 секции:

1. Сториз.

2. Заказы.

3. Баннеры

4. Спецпредложения

Также в рамках данного экрана присутствует попап-кнопка “Оформить быстрый заказ”, по нажатию на которую пользователь перенаправляется в раздел ”Быстрое оформление заказа”(Рисунок 7.13).

В секции Заказы отображаются:

● Заголовок.

● Количество всех заказов.

● Кнопка “Все”.

● Список заказов.

Каждый элемент списка заказов отображается в виде карточки.

Пользователь имеет возможность производить навигацию по элементам списка заказов путем горизонтального скроллинга.

Карточка элемента списка заказов может включать в себя, в зависимости от статуса следующий набор информации:

● Номер заказа.

● Тип услуги.

● Статус заказа.

● Дата.

● Время.

● Стоимость.

● Статус работы.

● Кнопки-действие.

Структурное представление карточки заказа в зависимости от статуса приведено на рисунке 7.12.

Рисунок 7.12. - Карточки заказа

В случае, если нет актуальных заказов и список заказов пуст, то пользователю отображается карточка с заголовком “Оформить быстрый заказ”, по тапу на которую происходит перенаправление в раздел “Быстрое оформление заказа”(Рисунок 7.13).

Рисунок 7.13. - Экран создания заказа

Если пользователь осуществляет тап по кнопке “Все”, то осуществляется переход в раздел “Заказы” (Рисунок 7.52).

Рисунок 7.52. - Экран заказы

Если пользователь тапает по карточке элемента списка заказа, то осуществляется перенаправление на экран детального просмотра заказа.

д7.5.2 Экран детального просмотра сториз

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.14.

Рисунок 7.14. - Экран детального просмотра элемента списка сториз

В рамках данного экрана пользователю отображается информацию элемента.

7.6 Уведомления

Только авторизованный пользователь имеет доступ к функциям и контенту данного раздела.

7.6.1 Экран списка уведомлений

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.15.

Рисунок 7.15. - Экрана списка уведомлений

В рамках данного экрана пользователю отображается информация элементов списка уведомлений.

Рисунок 7.16. - Прототип боттом-попапа с детальной информацией элемента списка уведомлений

Если пользователь осуществляет тап по области экрана вне боттом-попапа, то происходит скрытие боттом-попапа и элементу списка уведомлений устанавливается статус “Прочитано”.

7.6.2 Экран настройки уведомлений

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.18.

Рисунок 7.18. - Прототип экрана настроек уведомлений

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

7.7 Чат

Только авторизованный пользователь имеет доступ к функциям и контенту данного раздела.

7.7.1 Экран чата

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.19.

Рисунок 7.19. - Прототип экрана чата

7.8 Пункты приема

Только авторизованный пользователь имеет доступ к функциям и контенту данного раздела.

7.8.1 Экран списка пунктов приема

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.20.

Рисунок 7.20. - Прототип экрана списка пунктов приема в отображении в виде списка

В рамках данного экрана пользователю отображается информация элементов списка пунктов приема.

Пользователю предоставляется возможность изменять отображение элементов списка пунктов приема путем тапа на соответствующие области свитч-бар элемента. В случае, если пользователь тапает на область свитч-бар элемента “На карте”, то элементы списка пунктов приема отображаются на карте в виде маркеров (Рисунок 7.21). Иначе, если пользователь тапает на область свитч-бар элемента “Списком”, то элементы списка пунктов приема отображаются в виде списка (Рисунок 7.20).

Рисунок 7.21. - Прототип экрана списка пунктов приема в отображении на карте

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

Если пользователь тапает по кнопке “Мое месторасположение”, то в автоматическом режиме текущее отображение меняется на месторасположение пользователя.

Рисунок 7.22. - Прототип боттом-попапа с детальной информацией о пункте приема

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

7.9 Профиль

Только авторизованный пользователь имеет доступ к функциям и контенту данного раздела. В случае, если у пользователю отстутствует заполненное какое-либо из полей с контактной информацией, то ему отображается экран “Сохранения контактной информации пользователя”(Рисунок 7.24). Иначе отображается экран “Профиль пользователя”(Рисунок 7.25).

7.9.1 Экран сохранения контактной информации пользователя

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.24.

Рисунок 7.24. - Прототип экрана сохранения контактной информации пользователя

В рамках данного экрана пользователю необходимо ввести данные своей контактной информации.

Пользователю предоставляется возможность перейти в раздел “Заказы” и в раздел “Услуги”, путем тапа на соответствующие области свитч-бар элемента. В случае, если пользователь тапает на область свитч-бар элемента “Заказы”, то осуществляется перенаправление пользователя в раздел “Заказы”. Иначе, если пользователь тапает на область свитч-бар элемента “Услуги”, то осуществляется перенаправление пользователя в раздел “Услуги”.

7.9.2. Экран ввода кода подтверждения

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.25.

Рисунок 7.25 - Прототип экрана ввода кода подтверждения

Если пользователь тапает на поле ввода кода, то внизу экрана появляется клавиатура, которая позволяет вводить цифры. Если пользователь тапает по свободному месту на экране, то клавиатура скрывается.

7.9.3 Экран профиля пользователя

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.26.

Рисунок 7.26. - Прототип экрана профиля пользователя

В рамках данного экрана пользователю предоставляется личная информация.

Если пользователь осуществляет тап по кнопке редактировать, то происходит перенаправление пользователя на экран редактирования контактной информации пользователя.

По клику на карточку с информацией о бонусной карте пользователь перенаправляется на экран детальной информации о бонусной карте. Пользователь имеет только одну бонусную карту.

Если пользователь осуществляет тап по кнопке “Добавить”, то пользователь перенаправляется на экран добавления/изменения адреса доставки. Элементы списка адресов доставки отсортированы по дате создания, сначала отображаются наиболее актуальные, согласно дате создания.

Рисунок 7.27. - Прототип секции со списком адресов доставки

Каждый элемент списка адресов доставки представляет собой карточку.

Если пользователь осуществляет тап по элементу “Изменить”, то пользователь перенаправляется на экран добавления/изменения адреса доставки.

Если пользователь осуществляет тап по элементу “Удалить”, то пользователю отображается модальное окно с текстом “Вы действительно хотите удалить адрес доставки” и кнопки “Удалить”, “Отмена”. Если пользователь осуществляет тап по кнопке “Отмена”, то скрывается модальное окно и удаления адреса доставки не происходит.

Секция “Добавленные карты” включает в себя(Рисунок 7.28):

● Заголовок.

● Кнопка “Добавить”.

● Список добавленных карт.

Если пользователь осуществляет тап по кнопке “Добавить”, то пользователь перенаправляется на экран добавления/изменения банковской карты. Элементы списка добавленные карты отсортированы по дате создания, сначала отображаются наиболее актуальные, за исключение первого элемента. Первым элементом отображается карта, которая имеет статус карты по умолчанию.

Рисунок 7.28. - Прототип секции “Добавленные карты”

7.9.4 Экран редактирования контактной информации пользователя

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.29.

Рисунок 7.29. - Прототип экрана изменения контактной информации

В рамках данного экрана пользователю необходимо ввести данные своей контактной информации.

Информация указанное пользователем ранее является предзаполненной в данной форме.

7.9.5 Экран детальной информации о бонусной карте

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.30.

Рисунок 7.30. - Прототип экрана детальной информации бонусной карты

В случае, если пользователь осуществляет тап по кнопке “Назад”, то пользователь перенаправляется на экран профиля пользователя.

В случае, если пользователь осуществляет тап по кнопке “Подробнее”, то пользователь перенаправляется в браузер по ссылке https://www.bianca-city.ru/promo.

Пользователь имеет только одна бонусную карту.

7.9.6 Экран добавления/изменения адреса доставки

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.31.

Рисунок 7.31. - Прототип экрана добавления/изменения адреса доставки

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

В случае, если приложение не имеет доступа до геолокации пользователя и пользователь попадает на экран не первый раз, то при осуществлении тапа по кнопке “Мое месторасположение” пользователю отображается алерт с информацией, что необходимо предоставить доступ приложению для геолокации в настройках устройства.

Если пользователь не корректно заполнил какое-либо поле согласно правилам валидации, то поле необходимо подсвечивать и отображать ошибку “Неверно заполненное поле”.

Если пользователь не ввел, какое-либо из обязательных полей и перешел к заполнению следующего поля, то поле ввода необходимо подсвечивать и отображать ошибку “Поле обязательно для заполнения”.

Если пользователь тапает на любое поле формы адреса доставки, то внизу экрана появляется стандартная клавиатура для ввода любого символа.

Если пользователь тапает по свободному месту на экране, либо на кнопку “Ввод”, то клавиатура скрывается.

Если пользователь тапает по кнопке “Мое месторасположение”, то в автоматическом режиме текущее отображение меняется на месторасположение пользователя. Маркер в таком случае указывает на месторасположение пользователя.

Пользователь может навигироваться по карте в любом направлении и изменять масштаб.

7.10 История заказов

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

7.10.1 Экран списка заказов

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.35.

Рисунок 7.35. - Прототип экрана списка заказов

В рамках данного экрана пользователю отображается список заказов.

Экран включает в себя:

● Свитч-бар элемент выбора раздела.

● Фильтр элементов списка заказов .

● Список заказов.

Фильтр-элементов списка заказов содержит следующие значения:

● Все.

● Сбор.

● В химчистке.

● Приемка.

● В работе.

● Доставка.

● Готов к выдаче.

● Выполнен.

Пользователь имеет возможность сокращать выборку списка заказов, путем осуществление тапа по элементам фильтра. По умолчанию выбран фильтр “Все”. При выборе другого фильтра осуществляется фильтрация списка заказов, остаются в выборке заказы, статус которых соответствует значению фильтра.

Элементы списка заказов отсортированы по дате создания, в соответствии с этим в начале списка показываются самые актуальные элементы. Каждый элемент списка заказов отображается в виде карточки.

Пользователь имеет возможность производить навигацию по элементам списка заказов путем вертикального скроллинга. По мере навигации осуществляется подгрузка следующих элементов списка заказов.

Карточка элемента списка заказов может включать в себя, в зависимости от статуса следующий набор информации:

● Номер заказа.

● Тип услуги.

● Статус заказа.

● Дата.

● Время.

● Стоимость.

● Статус работы.

● Кнопки-действие.

● Кнопка ”Подробнее”

Структурное представление карточки заказа в зависимости от статуса приведено на рисунке 7.36.

Рисунок 7.36. - Прототип карточки заказа

В случае, если заказ находится в статусе “Сбор изделий,” то пользователю предоставляется возможность связаться с курьером. Если пользователь осуществляет тап по кнопке ”Позвонить курьеру” (рисунок 7.51), то пользователю нативными средствами отображается панель с возможностью вызова.

Рисунок 7.51. - Данные курьера

В случае, если заказ находится в статусе “Приемка изделий”, то пользователю предоставляется возможность подтвердить обработку всех изделий. Если пользователь осуществляет тап по кнопке “Согласовать все”, то пользователю отображается модальное окно в котором пользователь может произвести тап по кнопке “Согласовать все”, в таком случае все позиции заказа будут согласованными. Если пользователь осуществляет тап по кнопке “Отклонить”, то в таком случае скрывается модальное окно.

Рисунок 7.60. - Согласование изделий

В случае, если заказ находится в статусе “В работе”, то пользователю предоставляется возможность назначить адрес и время доставки. Если пользователь осуществляет тап по кнопке “Указать адрес и время”, то пользователь перенаправляется на экран назначения адреса и времени доставки.

В случае, если заказ находится в статусе “Доставка”, то пользователю предоставляется возможность изменить адрес и время доставки. Если пользователь осуществляет тап по кнопке “Изменить адрес и время”, то пользователь перенаправляется на экран назначения адреса(Рисунок 7.54).

Рисунок 7.54. - Изменение адреса

Если пользователь осуществляет тап по кнопке “Подробнее” карточки элемента списка заказов, то происходит перенаправление на экран детального просмотра заказа (Рисунок 7.37).

7.10.2 Экран детального просмотра заказа

Структурное представление внешнего вида экрана и расположения элементов(в зависимости от статуса заказа) на нем отображено на рисунках 7.37, 7.55, 7.56, 7.57.

7.10.3 Экран детального просмотра заказа со статусом “в работе”

Рисунок 7.37. - Экрана детального просмотра заказа со статусом в работе

В рамках данного экрана пользователю отображается детальная информация о заказе.

Экран включает в себя:

● Номер заказа.

● Кнопка “Назад”.

● Информация о заказе.

● Список позиций заказа.

● Кнопка “Назначить доставку”.

● Кнопка “Оплатить заказ”.

Информация о заказе включает в себя:

● Название услуги.

● Стоимость.

● Количество вещей готовых к выдаче.

В случае, если пользователь осуществляет тап по кнопке “Назад”, то происходит перенаправление на экран списка заказов.

В списке позиций заказа отображаются изделия данного заказа. Каждое изделие представляет собой карточку. Карточка включает в себя:

● Описание.

● Фотография.

● Тип работ.

● Стоимость.

● Статус.

● Кнопка “Детальный просмотр”.

● Номер изделия в заказе.

В случае, если пользователь осуществляет тап по кнопке ”Детальный просмотр”, то пользователь перенаправляется на экран просмотра позиции заказа.

Если пользователь осуществляет тап по кнопке “Назначить доставку”, то пользователь перенаправляется на экран назначения адреса.

Если пользователь осуществляет тап по кнопке “Оплатить заказ”, то пользователю отображается боттом-попап с механизмом оплаты.

Рисунок 7.59. - боттом-попап с функционалом оплаты.

Боттом-попап с механизмом оплаты включает в себя:

● Список банковских карт пользователя

● Форма ввода данных банковской карты

● Кнопка оплатить

● Опция“Apple pay”(“Google pay”)

Форма банковской карты включает в себя:

● Номер карты - представляет собой поле для ввода номера банковской карты пользователя, длинной от 12 до 20 символов. Является обязательным для заполнения.

● Срок действия - представляет собой поле для ввода срока действия банковской карты пользователя, длинной до 5 символов, первые два числа не превышают числа 12. Является обязательным для заполнения.

● CVC/CVV - представляет собой поле для ввода кода проверки подлинности банковской карты пользователя, длинной до 3 символов. Является обязательным для заполнения.”.

7.11.4.2 Экран детального просмотра заказа со статусом “сбор”

Рисунок 7.55. - Экран детального просмотра заказа со статусом сбор

В рамках данного экрана пользователю отображается детальная информация о заказе.

Экран включает в себя:

● Номер заказа.

● Кнопка “Назад”.

● Информация о заказе.

● Данные курьера.

● Кнопка “Изменить адрес и время”.

● Кнопка “Отменить”.

Информация о заказе включает в себя:

● Название услуги.

● Адрес.

● Дата.

● Время.

Данные курьера представляют собой карточку, карточка включает в себя:

● Фото курьера.

● Номер автомобиля.

● Кнопка “Позвонить курьеру”.

В случае, если пользователь осуществляет тап по кнопке “Позвонить курьеру”, то пользователю нативными средствами отображается панель с возможностью вызова номера телефона.

Если пользователь осуществляет тап по кнопке “Изменить адрес и время”, то пользователь перенаправляется на экран назначения адреса.

Если пользователь производит тап по кнопке “Отменить”, то пользователю отображается модальное окно в котором пользователь может произвести тап по кнопке “Да”, в таком случае заказ отменяется и пользователь перенаправляется на экран списка заказов. Если пользователь осуществляет тап по кнопке “Нет”, то в таком случае скрывается модальное окно (Рисунок 7.55).

7.10.4. Экран детального просмотра заказа со статусом “доставка”

Рисунок 7.56. - Экрана детального просмотра заказа со статусом доставка

Рисунок 7.61. - Боттом-попап детальной информации о позиции заказа

В рамках данного экрана пользователю отображается детальная информация о заказе.

Экран включает в себя:

● Номер заказа.

● Кнопка “Назад”.

● Информация о заказе.

● Данные курьера.

● Список позиций заказа.

● Кнопка “Изменить адрес и время”.

● Кнопка “Оплатить заказ”.

Информация о заказе включает в себя:

● Название услуги.

● Адрес.

● Дата.

● Время.

Данные курьера представляют собой карточку, карточка включает в себя:

● Фото курьера.

● Номер автомобиля.

● Кнопка “Позвонить курьеру”.

● Описание.

● Фотография.

● Тип работ.

● Стоимость.

● Статус.

● Кнопка “Подробнее”.

● Номер изделия в заказе.

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

В случае, если пользователь осуществляет тап по кнопке ”Подробнее”, то в таком случае пользователю отображается боттом-попап с информацией о позиции заказа (Рисунок 7.61).

Если пользователь осуществляет тап по кнопке “Оплатить заказ”, то пользователю отображается боттом-попап с механизмом оплаты (Рисунок 7.59).

Боттом-попап с механизмом оплаты включает в себя:

● Список банковских карт пользователя

● Форма ввода данных банковской карты

● Кнопка оплатить

Форма банковской карты включает в себя:

7.11.4.4 Экран детального просмотра заказа со статусом “приемка”

Рисунок 7.57. - Экрана детального просмотра заказа со статусом приемка

В рамках данного экрана пользователю отображается детальная информация о заказе.

Экран включает в себя:

● Номер заказа.

● Кнопка “Назад”.

● Информация о заказе.

● Список позиций заказа.

● Кнопка “Подтвердить все”.

● Кнопка “Отклонить все”

Информация о заказе включает в себя:

● Название услуги.

● Доп информация

● Описание.

● Фотография.

● Тип работ.

● Стоимость.

● Статус.

● Кнопка “Подробнее”

● Кнопка “Детальный просмотр”.

В случае, если пользователь осуществляет тап по кнопке ”Подробнее”, то в таком случае пользователю отображается боттом-попап с информацией о позиции заказа(Рисунок 7.58).

Рисунок 7.58. - боттом-попап с информацией о позиции заказа

Информация о позиции заказа включает в себя:

● Описание.

● Фотография.

● Тип работ.

● Стоимость.

● Статус.

● Кнопка “Подтвердить”

● Кнопка “ Отклонить”.

Если пользователь тапает по кнопке “Подтвердить”, то пользователю отображается модальное окно в котором пользователь может произвести тап по кнопке “Подтвердить”, в таком случае все позиция заказа будет согласованной. Если пользователь осуществляет тап по кнопке “Отмена”, то в таком случае скрывается модальное окно. Если пользователь производит тап по кнопке “Отклонить”, то пользователю отображается модальное окно для подтверждения отмены. Если пользователь производит тап по кнопке “Да”, то в таком случае позиция заказа отменяется. Иначе если пользователь осуществляет тап по кнопке “Нет”, то в таком случае модальное окно закрывается.

Если пользователь производит тап по кнопке “Подтвердить все”, то пользователю отображается модальное окно в котором пользователь может произвести тап по кнопке “Подтвердить”, в таком случае все позиции заказа будут согласованными. Если пользователь осуществляет тап по кнопке “Отмена”, то в таком случае скрывается модальное окно.

Если пользователь производит тап по кнопке “Отклонить все”, то пользователю отображается модальное окно для подтверждения отмены. Если пользователь производит тап по кнопке “Да”, то в таком случае заказ отменяется. Иначе если пользователь осуществляет тап по кнопке “Нет”, то в таком случае модальное окно закрывается.

7.10.5 Экран назначения адреса

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.38.

Рисунок 7.38. - Экрана назначения адреса

В рамках данного экрана пользователь имеет возможность задать адрес.

Функционал секции “Адрес” работает подобно функционалу описанному на экране добавления/изменения адреса доставки (Пункт 7.10.6). Данный экран расширен относительно экрана добавления/изменения адреса доставки (Пункт 7.10.6) карточкой “Мои адреса”. Если пользователь осуществляет тап по карточке “Мои адреса”, то пользователю отображается боттом-попап с формой выбора адреса, по умолчанию выбран актуальный адрес из профиля. Пользователь имеет возможность изменять выбранный адрес путем установки чек-бокс элемента в активное положение. При выборе соответствующего адреса форма адреса заполняется автоматически. Также по умолчанию форма выбора адреса пред заполнена значением актуального адреса из профиля.

Рисунок 7.63. - Боттом-попап выбора адреса из списка “Мои адреса”

Если пользователь осуществляет тап по кнопке “Выбрать адрес”, то осуществляется перенаправление пользователя на экран назначения даты и времени доставки.

7.10.6 Экран детального просмотра позиции заказа

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.45.

В рамках данного экрана пользователю предоставляется возможность просматривать детальную информацию позиции заказа.

В случае, если пользователь осуществляет тап по кнопке “Назад”, то происходит перенаправление пользователя в раздел на соответствующий экран с которого был осуществлен переход на данный экран на предыдущем шаге.

Пользователь имеет возможность навигировать по элементам слайдера с фотографиями, путем горизонтальных свайпов. Если пользователь осуществляет тап по какой-либо фотографии слайдера, то происходит перенаправление пользователя в раздел “Слайдер фотографий” с отображением фотографии по которой был осуществлен тап.

Секция “Основная информация об изделии” включает в себя:

● Название изделия.

● Тип работ.

● Стоимость.

● Статус.

● Доп информация

Секция “Атрибуты изделия” включает в себя:

● Износ изделия.

● Цвет.

● Размер.

● Бренд.

● Обнаруженные дефекты.

7.10.6.Экран детального просмотра позиции заказа(заказ в статусе “приемка”)

Рисунок 7.45. - Экран детального просмотра позиции заказа(заказ в статусе “приемка”)

Экран включает в себя:

● Кнопка “Назад”.

● Слайдер с фотографиями изделия.

● Основная информация об изделии.

● Атрибуты изделия.

● Кнопка “Подтвердить”.

● Кнопка “Отклонить”.

В случае, если пользователь осуществляет тап по кнопке “Подтвердить”, то пользователю отображается модальное окно с информацией согласования и с кнопками “Подтвердить” и “Отмена”. Если пользователь тапает по кнопке “Отмена”, то модально окно скрывается. Иначе, если пользователь тапает на кнопку “Подтвердить”, то позиция заказа переходит в статус “В обработке”, иначе пользователю отображается экан с ошибкой.

В случае, если пользователь осуществляет тап по кнопке “Отклонить”, то позиция заказа удаляется и происходит перенаправление на экран детального просмотра заказа, иначе пользователю отображается экран с ошибкой.

7.11.7 Экран назначения даты и времени

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.62.

Рисунок 7.62. - Экрана изменения даты и времени

В рамках данного экрана пользователь имеет возможность задать дату и время.

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

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

● 10:00 - 13:00.

● 13:00 - 16:00.

● 16:00 - 19:00.

● 19:00 - 22:00.

Если пользователь осуществляет тап по кнопке “Выбрать дату”, то пользователь перенаправляется на экран с которого осуществлялся переход на экран назначения адреса на предыдущем шаге.

7.11 Быстрое оформление заказа

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

7.12.1 Экран адреса сбора

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.39.

Рисунок 7.39. - Экран выбора адреса сбора

В случае, если пользователь осуществляет тап по кнопке “Назад”, то происходит перенаправление на экран с которого был осуществлен переход на данный экран.

Функционал секции “Адрес сбора” работает подобно функционалу описанному на экране добавления/изменения адреса доставки (Пункт 7.11.6). Данный экран расширен относительно экрана добавления/изменения адреса доставки (Пункт 7.11.6) карточкой “Мои адреса”. Если пользователь осуществляет тап по карточке “Мои адреса”, то пользователю отображается боттом-попап с формой выбора адреса доставки, по умолчанию выбран актуальный адрес доставки из профиля. Также по умолчанию форма выбора адреса пред заполнена значением актуального адреса из профиля. Пользователь имеет возможность изменять выбранный адрес сбора путем установки чек-бокс элемента в активное положение. При выборе соответствующего адреса форма адреса сбора заполняется автоматически.

В случае, если пользователь осуществляет тап по кнопке выбор адреса, то происходит перенаправление на экран выбора услуг.

7.11.2 Экран выбора услуг

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.40.

Рисунок 7.40. - Экран выбора услуг

В рамках данного экрана пользователь имеет возможность выбрать услугу.

В случае, если пользователь выбрал какую-либо услугу и осуществляет тап по кнопке “Далее”, то происходит перенаправление на экран выбора даты сбора. Иначе, если услуга не выбрана, то кнопка “Далее” не активна. Если на выбранную услугу действует акция, то пользователю после нажатия на кнопку “Далее” отображается модальное окно с описанием акции и кнопками “Оформить срочный заказ”, “Оформить обычный заказ”. Если пользователь осуществляет тап по кнопке “Оформить срочный заказ”, то скрывается модальное окно и данная опция отображается в секции “Детали заказа”. Если пользователь осуществляет тап по кнопке “Оформить обычный заказ”, то скрывается модальное окно, дополнительная опция не добавляется и происходит перенаправление на экран выбора даты сбора.

Секция выбора услуг включает в себя:

● Заголовок.

● Список услуг.

Каждый элемент списка услуг представляет собой карточку. Карточка включает в себя:

● Изображение.

● Чекбокс.

● Название услуги.

● Дополнительная информация.

● Кнопка “Подробнее”.

Пользователь имеет возможность выбрать только одну услугу. Если пользователь осуществляет там по чекбоксу то выбирается соответствующая услуга. При активном чек-боксе какого-либо элемента списка услуг, прочие становятся неактивными, как чекбоксы, так и карточки. При выборе элемента списка услуг информация соответствующая данному элементу отображается в секции “Детали заказа”. В случае, если пользователь осуществляет тап по карточке услуги, то происходит перенаправление на экран детального просмотра услуги.

В случае, если пользователь осуществляет тап по кнопке “Подробнее”, то пользователю отображается боттом-попап с информацией о бесплатном сборе и доставке.

Секция “Детали заказа” включает в себя:

● Заголовок.

● Список деталей заказа.

Каждый элемент списка деталей заказа представляет собой карточку. Карточка включает в себя:

● Название детали заказа.

● Информация.

● Кнопка “Редактировать”(для адреса сбора).

● Кнопка “Удалить”(для услуги, для опции).

Если пользователь осуществляет тап по кнопке “Редактировать”, для детали заказа касаемой адреса, то осуществляется перенаправление на экран адреса сбора.

Если пользователь осуществляет тап по кнопке “Удалить”, для детали заказа касаемой дополнительной опции, то данная опция исчезает из списка деталей заказа.

Если пользователь осуществляет тап по кнопке “Удалить”, для детали заказа касаемой услуги, то все чекбокс элементы у карточек с услугами сбрасываются в неактивное положение. Услуга и опция связанная с ней исчезают из списка деталей заказа.

7.11.3 Экран детального просмотра услуги

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.41.

Рисунок 7.41. - Экран детального просмотра услуги

В рамках данного экрана пользователь имеет возможность осуществлять просмотр информации об услуге.

В случае, если пользователь осуществляет тап по кнопке “Выбрать услугу”, то происходит перенаправление на экран выбора услуги. Чек-бокс соответствующей карточки услуги устанавливается в активное положение.

7.11.4 Экран выбора даты сбора

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.42.

Рисунок 7.42. - Экран выбора даты сбора

В рамках данного экрана пользователь имеет возможность установить дату и время сбора.

Секция “Дата сбора” включает в себя:

● Заголовок.

● Информация о дате доставки.

● Заголовок.

● Информация о времени доставки.

Информация о дате доставке представляет собой карточку. Карточка включает в себя:

● Число.

● Месяц.

● Год.

● Иконка календаря.

● 10:00 - 13: 00.

● 13:00 - 16:00.

● 16:00 - 19:00.

● 19:00 - 22:00.

В случае, если пользователь осуществляет тап по кнопке “Далее”, то происходит перенаправление на экран выбора способа оплаты.

Секция “Детали заказа” включает в себя:

● Заголовок.

● Список деталей заказа.

Каждый элемент списка деталей заказа представляет собой карточку. Карточка включает в себя:

● Название детали заказа.

● Информация.

● Кнопка “Редактировать”(для услуги, для адреса сбора).

● Кнопка “Удалить”(для опции)

Если пользователь осуществляет тап по кнопке “Редактировать”, для детали заказа касаемой услуги, то то осуществляется перенаправление на экран выбора услуг.

7.11.5 Экран выбора способа оплаты.

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.43.

Рисунок 7.43. - Экран выбора способа оплаты

В рамках данного экрана пользователь имеет возможность установить способ оплаты.

Секция “Оплата” включает в себя:

● Заголовок.

● Список способов оплаты.

Элементы списка способов оплаты представляют собой карточки.

Каждый элемент списка выбора способа оплаты включает в себя:

● Изображение.

● Чек-бокс.

● Название способа оплаты.

Пользователь имеет возможность выбрать только один способ оплаты. Если пользователь осуществляет тап по карточке способа оплаты,то выбирается соответствующий способ оплаты. По умолчанию выбран первый элемент списка. При активном чек-боксе какого-либо элемента списка способов оплаты, прочие чек-боксы становятся неактивными. При выборе элемента списка способов оплаты информация соответствующая данному элементу отображается в секции “Детали заказа”.

Список способов оплаты:

● Наличными курьеру. Оплата производится не в рамках приложения, перевод курьеру на карту.

● Картой курьеру.

● Картой после оформления. Оплата производится в рамках приложения.

В случае, если пользователь осуществляет тап по кнопке “оформить заказ”, то происходит перенаправление пользователя на экран успешно оформленного заказа. Иначе в случае неуспешного ответа пользователю отображается Экран с ошибкой.

7.11.6 Экран успешно оформленного заказа.

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.44.

Рисунок 7.44. - Прототип экрана успешно оформленного заказа

В рамках данного экрана пользователь имеет возможность Перейти на просмотр заказа или на оформление нового.

Экран включает в себя:

● Заголовок.

● Список оформленных заказов.

Каждый элемент списка оформленных заказов представляет собой карточку. Карточка заказа включает в себя:

● Номер заказа.

● Изображение.

● Кнопка “Просмотр заказа”.

● Кнопка “Заказать другую услугу”.

В случае, если пользователь осуществляет тап по кнопке “Просмотр заказа”, то происходит перенаправление на экран детального просмотра заказа.

В случае, если пользователь осуществляет тап по кнопке “Заказать другую услугу”, то происходит перенаправление на экран выбора адреса доставки.

7.11 Услуги

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

7.11.1 Экран списка категорий услуг

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.46.

Рисунок 7.46. - Прототип экрана списка категорий услуг

В рамках данного экрана пользователь имеет возможность осуществить выбор категории услуг.

Пользователю предоставляется возможность изменять перейти в раздел “Профиль” и в раздел “Заказы”, путем тапа на соответствующие области свитч-бар элемента. В случае, если пользователь тапает на область свитч-бар элемента “Профиль”, то осуществляется перенаправление пользователя в раздел “Профиль”. Иначе, если пользователь тапает на область свитч-бар элемента “Заказы”, то осуществляется перенаправление пользователя в раздел “Заказы”.

В случае, если пользователь осуществляет тап по кнопке “Перейти”, то происходит перенаправление на экран списка подкатегорий услуг.

7.11.2 Экран списка подкатегорий услуг

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.47.

Рисунок 7.47. - Прототип экрана списка подкатегорий услуг

В рамках данного экрана пользователь имеет возможность осуществить выбор подкатегории услуг.

Список подкатегорий услуг содержит карточки подкатегорий услуг.

В случае, если пользователь осуществляет тап по кнопке “Перейти”, то происходит перенаправление на экран списка услуг.

7.11.3 Экран списка услуг

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.48.

Рисунок 7.48. - Экрана списка услуг

В рамках данного экрана пользователь имеет возможность осуществить выбор услуг.

В случае, если пользователь осуществляет там по какому-либо элементу списка фильтров, то осуществляется фильтрация списка услуг.

В случае, если пользователь осуществляет ввод в поле “Поиск”, то происходит фильтрация списка услуг. Поиск осуществляется по названию.

Рисунок 7.49. - Боттом-попап корзины

В случае, если пользователь осуществляет тап по кнопке “Очистить”, то происходит удаление всех элементов из списка выбранных услуг. Количество выбранных услуг становится равным 0. Общая стоимость выбранных услуг становится равной 0.

В случае, если пользователь осуществляет тап по кнопке “Удалить”, то происходит удаление соответствующего элемента из списка выбранных услуг. Количество выбранных услуг уменьшается на количество равное количеству удаленного элемента. Общая стоимость выбранных услуг уменьшается на стоимость равную стоимости удаленной услуги.

В случае, если пользователь осуществляет тап по кнопке “Увеличить количество”, то происходит увеличение количества соответствующего элемента из списка выбранных услуг на 1 и увеличение Стоимости соответствующего элемента на стоимость за единицу услуги. Также увеличивается общее количество на 1. Общая стоимость выбранных услуг увеличивается на стоимость равную стоимости за единицу соответствующей услуги.

В случае, если пользователь осуществляет тап по кнопке “Уменьшить количество”, то происходит уменьшение количества соответствующего элемента из списка выбранных услуг на 1 и уменьшение Стоимости соответствующего элемента на стоимость за единицу услуги. Также уменьшается общее количество на 1. Общая стоимость выбранных услуг уменьшается на стоимость равную стоимости за единицу соответствующей услуги. Если количество равно 1 и пользователь осуществляет тап по кнопке “Уменьшить количество”, то происходит удаление соответствующего элемента из списка выбранных услуг. Количество выбранных услуг уменьшается на количество равное количеству удаленного элемента. Общая стоимость выбранных услуг уменьшается на стоимость равную стоимости удаленной услуги.

В случае перехода пользователя в список услуг других категорий или подкатегорий, то состояние корзины сохраняется.

В случае, если пользователь осуществляет тап по кнопке “Подробнее”, то происходит отображение боттом-попапа с детальной информацией об услуге (Рисунок 7.64).

Рисунок 7.64. - Боттом-попап детальной информации об услуге

В случае, если пользователь осуществляет тап по кнопке “Добавить”, то происходит добавление информации о соответствующей услуге в корзину. По умолчанию услуга добавляется в корзину в количестве равном 1.

В случае, если пользователь осуществляет тап по кнопке “Оформить заказ”, то происходит перенаправление в раздел “Создание заказа из корзины”.

7.12 Создание заказа из корзины

7.12.1 Экран адреса сбора

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.39.

В рамках данного экрана пользователь имеет возможность задать адрес, сбора.

Экран включает в себя:

● Заголовок.

● Кнопка “Назад”.

● Секция “Адрес сбора”.

● Секция “Мои адреса”.

● Кнопка “Выбрать адрес”.

В случае, если пользователь осуществляет тап по кнопке ”Выбрать адрес”, то происходит перенаправление на экран выбора даты сбора.

7.12.2 Экран выбора даты сбора

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.67

Рисунок 7.67. - Экран назначения даты и времени сбора

В рамках данного экрана пользователь имеет возможность установить дату и время сбора.

Экран включает в себя:

● Заголовок.

● Кнопка “Назад”.

● Список логистических сервисов.

● Секция “Детали заказа”.

● Кнопка “Далее”.

● Кнопка “Назад”.

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

Каждый элемент списка логистических сервисов включает в себя:

● Секция “Дата сбора”.

● Секция “Время сбора”.

Секция “Дата сбора” включает в себя:

● Заголовок.

● Информация о дате сбора.

● Заголовок.

● Информация о времени доставки.

Информация о дате доставке представляет собой карточку. Карточка включает в себя:

● Число.

● Месяц.

● Год.

● Иконка календаря.

● 10:00 - 13: 00.

● 13:00 - 16:00.

● 16:00 - 19:00.

● 19:00 - 22:00.

Секция “Детали заказа” включает в себя:

● Заголовок.

● Список логистических сервисов деталей заказа.

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

Каждый элемент списка логистических сервисов деталей заказа включает в себя:

● .Список деталей заказа.

Каждый элемент списка деталей заказа представляет собой карточку. Карточка включает в себя:

● Название детали заказа.

● Информация.

● Кнопка “Редактировать”(для услуги, для адреса сбора).

● Кнопка “Удалить”(для опции)

Если пользователь осуществляет тап по кнопке “Редактировать”, для детали заказа касаемой услуги, то осуществляется перенаправление на экран списка услуг с отображением корзины во весь экран.

7.13.3 Экран выбора способа оплаты.

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.43.

В рамках данного экрана пользователь имеет возможность установить способ оплаты.

Экран включает в себя:

● Заголовок.

● Кнопка “Назад”.

● Секция “Оплата”.

● Секция “Детали заказа”.

● Кнопка “Оформить заказ”.

● Кнопка “Назад”.

Секция “Оплата” включает в себя:

● Заголовок.

● Список способов оплаты.

Элементы списка способов оплаты представляют собой карточки.

Каждый элемент списка выбора способа оплаты включает в себя:

● Изображение.

● Чек-бокс.

● Название способа оплаты.

Список способов оплаты:

● Наличными курьеру. Оплата производится не в рамках приложения, перевод курьеру на карту.

● Картой курьеру.

● Картой после оформления. Оплата производится в рамках приложения.

В случае, если пользователь осуществляет тап по кнопке “Оформить заказ”, то происходит перенаправление пользователя на экран успешно оформленного заказа. Иначе в случае неуспешного ответа пользователю отображается Экран с ошибкой.

Каждый элемент списка логистических сервисов деталей заказа включает в себя:

● .Список деталей заказа.

Каждый элемент списка деталей заказа представляет собой карточку.

7.13.4 Экран успешно оформленного заказа.

Структурное представление внешнего вида экрана и расположения элементов на нем отображено на Рисунке 7.68.

Рисунок 7.68. - Экран успешного оформления заказа

В рамках данного экрана пользователь имеет возможность Перейти на просмотр заказа или на оформление нового.

Экран включает в себя:

● Заголовок.

● Список оформленных заказов.

Каждый элемент списка оформленных заказов представляет собой карточку. Карточка заказа включает в себя:

● Номер заказа.

● Изображение.

● Кнопка “Просмотр заказа”.

● Кнопка “Заказать другую услугу”.

В случае, если пользователь осуществляет тап по кнопке “Заказать другую услугу”, то происходит перенаправление на экран списка категорий услуг.