ita-social-projects / GreenCity

The main aim of “GreenCity” project is to teach people in a playful and challenging way to have an eco-friendly lifestyle. A user can view on the map places that have some eco-initiatives or suggest discounts for being environmentally aware (for instance, coffee shops that give a discount if a customer comes with their own cup). А user can start doing an environment-friendly habit and track their progress with a habit tracker.
MIT License
65 stars 80 forks source link

[Change request to #2199#2533 ] Order form – Fill in address details #4918

Closed RoksolanaKolomiyets closed 1 week ago

RoksolanaKolomiyets commented 1 year ago

Description of a Change request: Created new functionality of adding another recipient for the current order.

Reason for Change: UI improvements in the tab “Деталі замовлення” after customer reviews. Acceptance Criteria

  1. The user shall see the second section “Адреса вивозу сміття” and the message under it: “У Вас немає доданих адрес. Додайте, будь ласка, адресу.”.
  2. By default, the system shall display the link “Додати адресу”. When the user clicks on it, the system shall display pop-up window “Нова адреса” with the message “Наразі вивіз сміття працює тільки у місті Київ.”
  3. The address form shall include the following fields and their attributes:
Field title Field type Condition Prefilled text Validation
Вулиця Input field Mandatory Placeholder in grey color “Вулиця” Only alphabetic characters and special characters “-” (hyphen), " " (space) and " ' " (apostrophe) are allowed. From minimum 3 to maximum 40 characters are allowed. After typing 3 characters, the system shall show the street suggestions based on the Places API (Place Autocomplete). Suggestions are displayed by a drop-down list. When there are no suggestions the user should be able to type the full name of the street.
Будинок Input field Mandatory Placeholder in grey color “Будинок” Only numeric, alphabetic characters and "-,/"are allowed. when the user enters more 4 characters values ​​in the field "Будинок"​​Error message in red color does appear : "Only numeric, alphabetic characters and "-,/"are allowed maximum 4 characters". and frame is highlighted in red.
Корпус Input field Optionally Placeholder in grey color “Корпус” Only alphabetic and numeric characters are allowed. From minimum 1 to maximum 4 characters are allowed. when the user enters more 4 characters values ​​in the field "Корпус" ​​Error message in red color does appear : "Only numeric, alphabetic characters "are allowed maximum 4 characters". The frame is highlighted in red the field Корпус Input field Optionally Placeholder in grey color
“Під’їзд” Only numeric characters are allowed. From minimum 1 to maximum 2 characters are allowed. when the user enters more 2 characters ​​in the field "Під’їзд" ​​Error message in red color does appear : "Only numeric, characters are allowed maximum 2 characters".The frame is highlighted in red.
Район Drop-down list Mandatory Placeholder in grey color “Район” This field can be autofilled if the user finds the street name in GoogleMaps. If not, the list of all 10 Kyiv districts shall be displayed in the drop-down: Голосіївський, Дарницький, Деснянський, Дніпровський, Оболонський, Печерський, Подільський, Святошинський, Солом'янський, Шевченківський
Коментар до адреси Input field Optionally Placeholder in grey colour “Ремонтується дорога. Під’їзд до будинку доступний зі сторони будинку номер 15. The maximum character length is 255 characters, including alphabetic, numeric and all special characters. Once the user adds any comments about the address on the pop-up window, the system shall duplicate it in the section “Коментар до адреси” in the bottom of the tab. when the user enters invalid values Erro​​r message in red color does appear : "The maximum character length is 255 characters, including alphabetic, numeric and all special characters". and the frame is highlighted in red.

4. When user skips a mandatory field: a. the skipped field is highlighted in red b. under the skipped field user sees an error message “це поле обов’язкове до заповнення”. 5.When the user : a. enters invalid data, the error message "Поле містить заборонені символи" should be displayed under the field with incorrect data. b. exceeds the limit of maximum characters allowed to be input in the field, the error message "Перевищена максимална кількість символів" should be displayed under the related field 6. When the user clicks on the button “Відмінити”, the window will be closed and all the data on the pop-up shall be erased. 7. The button “Додати адресу” is disabled until the user fulfills every mandatory field on the pop-up window. 8. When the user adds the very first address, the section “Адреса вивозу сміття” shall be changed in the following way: - the initial message about adding address shall be automatically changed into another message: “Важливо: кур’єр забирає пакети біля під’їзду, на поверх не піднімається.”; - under the message, the user shall see just added address with the selected radio button and edit button; - under the address, the system shall automatically add the link “Додати іншу адресу”. When the user clicks on it, the system shall display another address pop-up window as it is in AC-7. The limit on the page - 4 addresses. - when the user adds several addresses, the user shall be able to select only one address by clicking on a radio button of the preferable address. ![image](https://user-images.githubusercontent.com/116280846/210862730-1d823e95-0d76-45b9-9294-7c7196e88d3d.png) 9. Under the “Адреса вивозу сміття” section, the user shall be able to see the last section “Коментар до адреси” with the input field for comments for added address. The field contains a placeholder with a grey-colored text: “Будь-які деталі про Вашу адресу (чи є шлагбаум, з якої вулиці краще заїжджати та ін.)” and it shall disappear once the user starts typing. This input field is optional. If the user adds any comments about the address on the pop-up window, the system shall duplicate it in the section “Коментар до адреси” in the bottom of the tab. Validation: the maximum character length is 255 characters, including alphabetic, numeric and special characters. ![image](https://user-images.githubusercontent.com/116280846/210862819-430203a1-2197-407d-83c3-50502c3d45c4.png) 10. By clicking on the button “Далі”, the user shall be redirected to the next tab “Підтвердження”. The system shall save the entered data so the user is able to edit any data by clicking on the button “Назад”. 11. When the user wants to close the window or the current tab in the browser to interrupt the order flow, the system shall show an alert message with the warning: ![image](https://user-images.githubusercontent.com/116280846/210895843-bfb953d2-84bf-49fc-a5a8-74923998dcef.png) - If the user clicks on the button “Окей”, the system shall save the order as a draft in the user’s cabinet and close the window. - If the user clicks on the button “Окей”, the system shall save the order as a draft in the user’s cabinet and close the window. **Impact of Change** This change request affects 1 existing user story: https://github.com/ita-social-projects/GreenCity/issues/2199 - Fill in address details **Labels to be added** [change request: UI improvement] Epic: [UBS courier #2195

HalynaChornevych commented 1 year ago

NOT RELEVANT