V: Individual upcoming opportunity

[juliancleung]

This is the page that shows full details for a volunteer's upcoming opportunities. They can access this page from the Upcoming Opportunities dashboard (#64) when they click into an opportunity. This story is similar to #43. This view will allow a volunteer to cancel attendance for an upcoming opportunity.

Cancel attendance behaviour:
The volunteer should only be able to withdraw from an event if the event is more than 3 days away. Grey out the button if the event is 3 or less days away. When the volunteer clicks the cancel button, a popup should appear asking the volunteer if they are sure. If yes, then a snackbar will appear to confirm the details.

Verbiage for the popup (see below for example of layout with different verbiage)

• "Are you sure you want to withdraw from [opportunity name]?"
• "You cannot change your decision after this."

Verbiage for the snackbar (see below for example of layout with different verbiage)

• "You have cancelled your attendance for this event"

Event Details displayed in the full card page (information from opportunity details):

• Opportunity Name
• Activity Type
• Date(s) of Event: taken from "Start date" and "End date" in the form
• Hours of Commitment: taken from "Number of hours" in the form
• Preferred Sector
• Grades of Participating Students
• Number of Students
• Number of Volunteers Needed: taken from "Number of volunteers required" in the form

School details displayed in full card page (information from educator details):

• School: name of school
• Address: address for school
• Transportation

Contact details displayed in full card page (information from educator details)

• Educator: educator name
• Phone number
• Position
• Email address

Acceptance Criteria for expanded view

• Display all information listed in the expanded view in the format shown in the design
• Back button allows user to go back to dashboard
• "Cancel Attendance" button allow user to remove themselves from the event if it is more than 3 days away
• "Cancel Attendance" button cannot be selected if the event is less than 3 days away
• Clicking "Cancel Attendance" opens a confirmation popup

Full details for upcoming opportunities
[Uploading... image.png ]
https://www.figma.com/file/HdMbW7Qx6bGAhlWJuBOSj0/BEP-High-Fidelity-Designs-(S20)?node-id=162%3A799

Example of popup

https://www.figma.com/file/HdMbW7Qx6bGAhlWJuBOSj0/BEP-High-Fidelity-Designs-(S20)?node-id=126%3A3203

Example of snackbar

https://www.figma.com/file/HdMbW7Qx6bGAhlWJuBOSj0/BEP-High-Fidelity-Designs-(S20)?node-id=142%3A281