shayokh144 / ic-survey-swiftui-combine Goto Github PK

Why

At the final step, logged in users must be able to submit their responses. The mobile app must show the Submit button instead of the Next button to inform users that the app will submit their response on the next action.

Acceptance Criteria

Call POST /api/v1/responses endpoint with the following body:

{
  "survey_id": "{{survey-id}}",
  "questions": [
    {{question-id-with-answers}},
    ...
  ]
}

For question-id-with-answers, there are two possible types of this data structure:

• With ID :

{
"id": "{{question-id}}",
"answers": [
 {
   "id": "{{answer-id}}"
 }
]
}

• With ID and Answer

{
"id": "{{question-id}}",
"answers": [
 {
   "id": "{{answer-id}}",
   "answer": "{{answer}}"
 }
]
}

• Write unit test to make sure all functionalities are working perfectly

Resource

• Postman - Nimble Survey API

Why

As users can sign in, the app must have an option for users to sign out. Signing out should completely remove any account-related footprints of the user.

Acceptance Criteria

Call POST /api/v1/oauth/revoke to sign out with the following body:

{
  "token": "{{user_access_token}}",
  "client_id": "{{client_id}}",
  "client_secret": "{{client_secret}}"
}

• Write unit test to make sure all functionalities are working perfectly

Why

At the final step, logged in users must be able to submit their responses.

Acceptance Criteria

Upon tapping the Submit button, perform the Submit Survey Response request with the survey id and the user's answers.

• If the request is successful,

  • Navigate the user back to Home
  • The survey must not be shown in Home

• Otherwise, display the error message on a modal alert dialog with an OK button

  • Selecting the OK button does nothing. DO NOT dismiss the screen so that the user can retry the submission.

• Write unit test

Why

Need to integrate login api.

Acceptance Criteria

• Enable login for correct credentials and send user to survey page
• Show error message for wrong credentials
• Save login data in KeyChain

Why

For Star Rating questions, users can rate their satisfaction by tapping on the star emoji.

Acceptance Criteria

For Star Rating questions,

• Display a Star emoji, ⭐️, as the options
• Select any option should highlight every other emoji on its left
• For instance, if a user selects the third star, the first, second, and third stars should be highlighted.
• Reduce the opacity of the non-selected range emojis

Design

• Figma link

Why

Logged in users can see their account's name and avatar. The account menu will serve as the navigation for account-related options for users to manage their account

Acceptance Criteria

• Display the Account button in Home
• Once the Account button is tapped, show the Account side menu.
  • Display the shadow overlay when the side menu is presented
  • Display the Name label and the Avatar image
  • Display the divider (above the Name label and the Avatar image)
  • Tap outside to dismiss
  • DO NOT implement the Logout button and the Version label yet.

Resource

• GUI

Design

Why

When a user happens to forget his/her password, the app should offers a way to recover it through the Forget Password feature.
So, in the Login screen, we will display the Forgot Password button to begin the flow to reset his/her password.

Acceptance Criteria

In login screen

• when tap on forget password take the user to forget password screen

In Forget Password screen

• When the Reset button is tapped, call the reset password request with the email in the Email text input.

  • if email format is wrong show error text in native modal with ok button to dismiss. The text will be: Whoops, it seems the email is incorrect. Please check and try again.
  • If the request is successful,
    • Clear the Email text input
  • A successful in-app notification will be implemented in another issue

• Otherwise, Display a modal alert dialog with the returned error message with an OK button

• Write unit test

Why

Need to setup splash screen

Acceptance Criteria

• Can show splash screen with animation like Figma
• Add Background image
• Add overlay image
• Add logo
• Set status bar color light

Design

Why

For thumbs up rating questions, users can rate their satisfaction by tapping on the 👍 emoji.

Acceptance Criteria

For thumbs up Rating questions,

• Display a thumbs up emoji, 👍, as the options
• Select any option should highlight every other emoji on its left
• For instance, if a user selects the third thumbs up, the first, second, and third thumbs up should be highlighted.
• Reduce the opacity of the non-selected range emojis

Design

• Figma link

Why

Need to automatically refresh my access token when it expired.

Acceptance Criteria

• Automatically use a refresh token to renew an access token when it expired.

• If fail then log the user out

• Write unit test to verify the behaviour

Why

As our API will send the reset password instructions to the email that a user signed in with, the app should instruct the user to go check their email inbox once the email is successfully sent.

Acceptance Criteria

• After the reset password email is successfully sent, show an in-app notification:
• The notification title is Check your email.
• The notification message is the returned successful message implemented in this issue
• If the request is successful but the successful message cannot be mapped, use the default message below
  We've sent you instructions to reset your password.
• Write unit test to make sure all functionalities are working perfectly

Why

Need to fetch surveys list from API.

Acceptance Criteria

• Call API endpoint /api/v1/surveys with the following query parameters:
  page[number]: 1
page[size]: 10
• Receive response
• Write unit test to make sure all functionalities are working perfectly

Resources

• Postman - Nimble Survey API

Why

For Heart Rating questions, users can rate their satisfaction by tapping on the heart emoji. This works like a normal rating from 1-5 stars question, but we will use heart emojis instead of stars

Acceptance Criteria

For Heart Rating questions,

• Display a Heart emoji, ❤️, as the options
• Select any option should highlight every other emoji on its left
  • For instance, if a user selects the third heart, the first, second, and third hearts should be highlighted.
• Reduce the opacity of the non-selected range emojis

Design

• Figma link

Why

As users can sign in, the app must have an option for users to sign out. Signing out should completely remove any account-related footprints of the user.

Acceptance Criteria

When a user confirms to log out, perform the Logout request.

• If the request is successful,

  • Navigate the user to Sign In
  • Remove any account-related stored data, such as credentials or user profile info.

• Otherwise, display the error message on a native modal dialog with an OK button.

• When a user selects Cancel, do nothing.

• Write unit test

Why

Need to show survey home page after login success so that users can navigate through a list of surveys that they can take. The mobile app will show the basic info of survey as they scroll through each survey.

Acceptance Criteria

• Use the survey cover image as the background image

• Append l to the image url to get the high-resolution image

• For the date label, show the survey's created_at.

  • Use the date format as shown in the design on the first line
  • Use hard coded text Today on the second line

• Use the survey title as the title label

• Use the survey description as the description label

• The number of page indicators must match with the number of surveys

• Don't ad any code for user icon behaviour

• Write unit test to make sure all functionalities are working perfectly

Design

Why

Logged in users can see their account's name and avatar. The account menu will serve as the navigation for account-related options for users to manage their account

Acceptance Criteria

• Call GET /api/v1/me to get the user's profile
• Write unit test to make sure all functionalities are working perfectly

Resource

• Postman - Nimble Survey API

Why

Need to setup swiftui project.

Acceptance Criteria

• Can show empty initial view
• Setup UI test and Unit test environment
• Create configuration for different environment like Debug, Staging, Production

Why

Logged in users must be able to see survey questions after clicking on Start survey button.

Acceptance Criteria

• Show {current question number/ total questions count} at top left
• Show a X button to quit the survey at top-right corner
• Show survey question title
• Show different rating view like heart, thumbs up, multiple questions, NPS
• Show next/ submit button

Design

• Figma link

Why

When a user happens to forget his/her password, the app should offers a way to recover it through the Forget Password feature.
So, in the Login screen, we will display the Forgot Password button to begin the flow to reset his/her password.

Acceptance Criteria

• In the Login screen,
  • Display the Forgot button button in the Password textfield
• Create new screen for forget password
  • Display the Back button
  • Display the Nimble logo
  • Display the Instruction label
    • Enter your email to receive instructions for resetting your password.
  • Display the Email text input
  • The placeholder is Email
  • Display the Reset button

Design

Why

Need to a JSONMapper to the project

Acceptance Criteria

• Add a JSONMapper as discussed here

Why

At the final step, users must be able to submit their responses. The mobile app must show the Submit button instead of the Next button to inform users that the app will submit their response on the next action.

Acceptance Criteria

• When a user reaches the last question, (The current question number equals to the number of questions)
  • Hide the Next button
  • Display the Submit button

Design

• Figma link

Why

Need to write unit test for login flow.

Acceptance Criteria

• Cover both right credentials and wrong credentials cases
• Make sure all build passed

Why

Logged in users can see their account's name and avatar. The account menu will serve as the navigation for account-related options for users to manage their account.

Acceptance Criteria

• Use the avatar url as the image url of the Account button

• In the side menu,

  • Use the user's name on the Name label
  • Use the avatar url as the image of the Avatar image

• If the avatar url is invalid or null, use the placeholder image (grey circle)

• Write unit test

Resource

• Use data form here

Why

As our API will send the reset password instructions to the email that a user signed in with, the app should instruct the user to go check their email inbox once the email is successfully sent.

Acceptance Criteria

When showing an in-app notification to inform the user of the reset password email,

• Animate the notification from the top
• Show the notification for 4 seconds and hide it animatedly
• Display the bell icon
• Display the Title label
• Display the Message label
• Set the maximum number of line to 4

Design

Why

For NPS rating questions, users can rate their satisfaction by tapping on the number.

Acceptance Criteria

For NPS Rating questions,

• Display numbers, as the options
• Select any option should highlight every other numbers on its left
• Reduce the opacity of the non-selected numbers
• Show texts Not likely att all and Extremely likely in left aligned and right aligned positions

Design

• Figma link

Why

Logged in users must be able to see survey questions after clicking on Start survey button.

Acceptance Criteria

• Integrate {current question number/ total questions count} at top left
• Integrate X button to quit the survey at top-right corner
• Integrate survey question title
• Integrate different rating view like heart, thumbs up, multiple questions, NPS
• Integrate next button to show next question
• Save users answer for submitting later

Dropdown question

When a Question model has display_type as dropdown,

• Display a dropdown's picker wheel in the Answer section
• Apply the answers as picker wheel items
• Use the answer's text to show as the picker wheel item's title
• By default, the first answer is initially selected

Smile question

When a Question model has display_type as smiley,

• Display a Smiley Rating question
• Use the answers as the rating options in an orderly manner
• A valid Smiley question must have 5 answers. If the number of answers is fewer than 5, treat it as an invalid question
• If the number of answers is more than five, use only the first five answers
• By default, none are initially selected

Heart rating question

When a Question model has display_type as heart,

• Display an Emoji Rating question with ❤️ as the options
• The number of hearts (❤️) must match with the number of answers
• By default, none are initially selected

Star rating question

When a Question model has display_type as star,

• Display an Emoji Rating question with ⭐️ as the options
• The number of stars (⭐️) must match with the number of answers
• By default, none are initially selected
  For type thumbs up or other emoji follow star rating system

NPS rating question

When a Question model has display_type as nps,

• Display an NPS scale in the Answer section
• The number of options (the scale range) must match with the number of the answers.
• By default, none are initially selected.

Single choice question

When a Question model has display_type as choice AND pick as one,

• Display a Single-choice question
• Use the answers to show as choices
• Allow only one selection
  • So, if a user selects A and then B, only B should be selected.
• By default, none are initially selected

Multiple choice question

When a Question model has display_type as choice AND pick as any,

• Display a Multiple-choice question
• Use the answers to show as choices
• Allow multiple selection
  • So, if a user selects A and then B, both A and B should be selected.
• By default, none are initially selected

No action question

When a Question model has display_type as outro or intro ,

• Display a No-action Question
• Selecting the Next button skips to the next question (or submit the form if it's the last question of the survey)

Textarea question

When a Question model has display_type as textarea,

• Display a text-area question
• Use the question's short text as the textbox's placeholder

Textfield question

When a Question model has display_type as textfield,

• Display a textfield question

• Use the answers to show as textfields

• Apply the answer's text as its textfield placeholder

• Write unit test to test the behaviour

Why

When a user happens to forget his/her password, the app should offers a way to recover it through the Forget Password feature.
So, in the Login screen, we will display the Forgot Password button to begin the flow to reset his/her password.

Acceptance Criteria

Call POST /api/v1/passwords to send the reset password instructions with the following body:

{
  "user": {
    "email": "{{email}}"
  },
  "client_id": "{{client_id}}",
  "client_secret": "{{client_secret}}"
}

• Write unit test to make sure all functionalities are working perfectly

Resource

• Postman - Nimble Survey API

Why

As users can sign in, the app must have an option for users to sign out. Signing out should completely remove any account-related footprints of the user.

Acceptance Criteria

• In the Account side menu, display the Logout button
• Upon tapping the Logout button, display a native modal alert dialog with the following content:
  • Title - Are you sure you want to log out?
  • Destructive action - Log out
  • Cancel action - Cancel
• Use the native bottom action sheet style as the modal dialog

Design

Why

Need to show survey home page after login success as users should be able to see the full preview of the details so that they can decide whether or not the survey matching their expectation.

Acceptance Criteria

• On the home screen, each survey card must display the following info:
  • Cover image (background)
  • Date time text at the top left corner
  • Name (in bold)
    • Max number of line 4
  • Description
    • Max number of line 2
  • Dots for page indicator
  • A button “Take Survey” to take the user to the survey detail screen
  • Circle user icon in top right corner
• Implement horizontal scroll/ swipe to change behaviour

Design

Why

Need to call login api.

Acceptance Criteria

• Call to login api end point api/v1/oauth/token
• Receive response

Why

Need to setup CI.

Acceptance Criteria

• Build and run project using Github Action CI for each pull request action.
• Use fastlane
• Add lint and code coverage report.

Why

Need to create login screen according to Figma

Acceptance Criteria

• Show login screen
• Show nimble logo
• Show white status bur
• Show overlay image
• Show username, password textfields and login button
• Show password textfield as secured
• Show place holders for textfields
• Show transition animation when login screen will appear
• Show texts using appropriate fonts provided in figma
• Use localized strings
• Show error message.

Design

Why

Need to Implement horizontal pull to refresh in survey home page because user can load new list of survey by pulling at the end of the current item.

Acceptance Criteria

• Fetch list of surveys when pull to refresh event occurs

• Show list of new surveys

• The navigation indicator dots must be dynamic and based on the API response

• After successful request cache the surveys list onto device

• After unsuccessful request show error popup

• Map the new survey data into UI based on this issue

• Write unit test to make sure all cases are working fine

Why

Need to show lazy loading view before survey appears.

Acceptance Criteria

• Show lazy loading view before survey home page appears.
• Add lazy loading for all the UI components like date, date description, user icon, survey title and description
• Don't show lazy loading for survey details arrow button
• Make sure the color and animation appears same as Figma

Design

Why

Need to setup CD to deploy IPA into firebase.

Acceptance Criteria

• Create and push IPA to firebase.
• Distribute IPA to testers.
• Use fastlane and github action

Why

Need to setup automatically refresh my access token system when it expired.

Acceptance Criteria

• Use a refresh token to call API endpoint /api/v1/oauth/token to retrieve a new access token with the body:

{
    "grant_type": "refresh_token",
    "refresh_token": {{refresh_token}},
    "client_id": "{{client_id}}",
    "client_secret": "{{client_secret}}"
}

-After successful request, update an access and a refresh token in local storage.

• Write unit test to make sure all functionalities are working perfectly

Why

When a logged in user decides to start taking a survey, the mobile app should retrieve the survey's questionnaires by fetching the whole survey details.

Acceptance Criteria

Add Start Survey button action following below rules,

• Perform the Survey Details request with the survey id

  • If the request is successful, navigate to the empty Take Survey screen with the fetched survey details.
    • Use a native transition.
  • Otherwise, display the error message on a native modal alert dialog with an OK button

• Change the Start Survey button to the loading state when the request is ongoing

• Change the Start Survey button to the idle state when the request is completed

• Write unit test to verify the behaviour

Why

For dropdown questions, users can select their answer from multiple options.

Acceptance Criteria

When a Question model has display_type as dropdown,

• Display a dropdown's picker wheel in the Answer section
• Apply the answers as picker wheel items
• Use the answer's text to show as the picker wheel item's title
• By default, the first answer is initially selected

Design

• Figma link

Why

For Smile rating questions, users can rate their satisfaction by tapping on the 😊 emoji.

Acceptance Criteria

For smile Rating questions,

• Display a smile emoji, 😊, as the options
• Select any option should highlight every other emoji on its left
• For instance, if a user selects the third smile, the first, second, and third smile should be highlighted.
• Reduce the opacity of the non-selected range emojis

Design

• Figma link

Why

Need to Implement horizontal pull to refresh in survey home page because user can load new list of survey by pulling at the end of the current item.

Acceptance Criteria

• Show loading indicator when pull to refresh occurs.
• Show refreshed data
• Show alert if there is no new data
• Update navigation dots view to incorporate new items

Why

Choice questions allow users to pick the most suitable option to answer since the mobile app will lay out all the options.

Acceptance Criteria

For choice questions,

• Display choices with checkboxes
• Highlight a selected choice by ticking its checkbox
• Reduce the opacity of non-selected choices and untick their checkbox
• DO NOT limit the maximum number of line on the Choice Text labels

Design

• Figma link

Why

There are two No-action questions; Intro and Outro. They serve as an instructive question or appreciative question. These types of question does not require any action apart from proceeding to the next question.

Acceptance Criteria

For No-action questions,

• Do not display the Answer section

Design

Why

A text-area question type is a question type that allows a user to fill in a multi-line text input. It is commonly used when we would like to ask an open-end question, such as asking for suggestions or comments.

Acceptance Criteria

For text-area questions,

• Display a textbox that supports multi-line text input
• Display a placeholder inside the textbox
  • The textbox is scrollable when the number of lines goes beyond its viewport (i.e., when the text input no longer fits within the textbox)
• Display the keyboard when a textbox is selected
  • Tap anywhere outside of textbox to release the keyboard
  • The keyboard must not cover what the user is typing

For textfield questions,

• Display an inline textfield
• Display a placeholder in the textfield
• When a textfield is not empty, increase the opacity
  • Display the keyboard when a textfield is selected
• Tap anywhere outside of the textfield to release the keyboard
• The keyboard must not cover the selected textfield

Design

• Figma link

Why

When a logged in user decides to start taking a survey, the mobile app should show survey details.

Acceptance Criteria

• Display title and description with no maximum number of lines
• Display the back button with white arrow
• Display the Start Survey button
• The screen is scrollable only when the content does not fit the screen
• Implement the loading state of button
  • Hide the button title
  • Display the native loading indicator in the center of the Start Survey button
  • Disable the button
• Implement error message showing capability using a native modal alert dialog with an OK button

Design

• Figma link of survey details

Why

Logged in users must be able to answer survey questions after clicking on Start survey button.

Acceptance Criteria

Dropdown question

When tapping the Next button (or the Submit button) on a Dropdown question, store the currently selected option.

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-id}}"
    }
  ]
}

Smile question

When tapping the Next button (or the Submit button) on a Smiley Rating question, store the currently selected option,

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-id}}"
    }
  ]
}

Heart rating question

When tapping the Next button (or the Submit button) on a Heart Rating question, store the currently selected option,

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-id}}"
    }
  ]
}

Star rating question

When tapping the Next button (or the Submit button) on a Star Rating question, store the currently selected option,

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-id}}"
    }
  ]
}

NPS rating question

When tapping the Next button (or the Submit button) on n NPS question, store the currently selected option,

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-id}}"
    }
  ]
}

Single choice question

When tapping the Next button (or the Submit button) on a Single-choice question, store the currently selected option,

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-id}}"
    }
  ]
}

Multiple choice question

When tapping the Next button (or the Submit button) on a Multiple-choice question, store the currently selected option(s),

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-1-id}}"
    },
    {
      "id: "{{selected-answer-2-id}}"
    },
    ...
  ]
}

Textarea question

When tapping the Next button (or the Submit button) on a text-area question, store the user's answer,

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{first-answer-id}}",
      "answer": "{{text-input}}"
    }
  ]
}

Textfield question

When tapping the Next button (or the Submit button) on a textfield question, store the user's answer,

{
"id": "{{question-id}}",
"answers": [
  {
    "id": "{{first-answer-id}}",
    "answer": "{{first-answer-text-input}}"
  },
  {
    "id": "{{second-answer-id}}",
    "answer": "{{second-answer-text-input}}"
  },
  ...
]
}

• Filter out empty textfields
• Write unit test to test the behaviour

Why

Need to show thank you page after successful survey submission

Acceptance Criteria

• Show text based on figma design
• Show Lottie-based animation from Figma
• Show thank you page

Design