Update content on DUP homepage - includes hold pass info

[JLWade]

Description:

Do not deploy this update until after April 23rd.

As a potential park visitor, I want to easily understand guidelines, rules, and process for booking a day use pass so that I know what I'm doing.

This ticket is to update content on the homepage of DUP to address some plain language elements, address confusion about booking passes, and be more user friendly. Many updates are capitalizations or hyperlink updates.

Updates required can be found here: https://bcgov.sharepoint.com/:w:/r/teams/031072/_layouts/15/Doc.aspx?sourcedoc=%7B008EAE24-83BE-4F84-B144-F77470B79C29%7D&file=day-use-pass-system-home-v0.1.docx&wdLOR=c1A82600D-B28E-4F56-B44A-A7BBBAD44E48&action=default&mobileredirect=true

Areas for updates 1-5:

Figma link: https://www.figma.com/file/2lQW8InOa0lEiUiMeGmeNC/Day-Use-Pass?type=design&node-id=4464%3A9887&mode=design&t=g9d631EUDA9crfiG-1

Acceptance Criteria:

updated content referenced below is in link above

On the DUP homepage

• [x] 1. content it updated in the top grey banner
• [x] 2. content is updated in the white box within the image.
  • [x] including updating age of children
• [x] 3. content is updated in the yellow important booking info box.
• [x] 4. a button replaces hyperlink for cancelling a pass and reads "Cancel my pass" and takes users to the cancellation page.
• [x] 5. content is updated in Keys to visiting the great outdoors box.

Development Checklist:

• [ ] ...
• [ ] ...
• [ ] ...

Dependencies

• relates to #336 (ensure content from this ticket is not removed)

Notes:

-

Wireframe(s):

Workflows:

Definition of Ready (Note: If any of these points are not applicable, mark N/A)

• [ ] User story is included
• [ ] User role and type are identified
• [ ] Acceptance criteria are included
• [ ] Wireframes are included
• [ ] Design / Solution is accepted by Product Owner
• [ ] Dependencies are identified (technical, business, regulatory/policy)
• [ ] Story has been estimated (under 13 pts)

Definition of Done

• In progress:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] UI meets accessibility requirements
  • [ ] Unit tests are written
  • [ ] Work is traceable in GitHub
  • [ ] PR linked to ticket number
  • [ ] If needed/required - Dev adds flag/label to highlight any migration steps necessary prior to PROD deployment
• Code review:
  • [ ] Code is peer reviewed and has passed CI/CD tests
• QA:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Code is potentially shippable to the production environment
  • [ ] Functional features have been tested and passed by QA
  • [ ] UI components tested by designer
  • [ ] Code is deployed to PROD when moved to 'done' column (unless requested otherwise by PO)
• PO Review:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Reviewed and approved by Product Owner

[ndelraye]

Marshall has approved attached content, this ticket is ready to go

[davidclaveau]

This should be ready for review in dev!

[manuji]

Tested on TEST: Passed

• Verified that the copy changes requested in the word document has been correctly updated.
• Verified that the link to cancel passes has been replaced with a button; but the following issue could be seen in the button, not a blocker for the PROD deployment but we need to fix it for the next release unless the current implementation is approved by the design team.
• The button to "Cancel my pass" does not look like the design mockups. Need to make the button bit smaller to match the designs. Given below is what has been implemented.

Given below is the design:

Also on mobile view, the button takes the screen width which is inconsistent to the other buttons on the page.

• Passing this ticket to PO review before deploying to PROD. @JLWade , please confirm if this is approved to deploy to PROD today.

[JLWade]

Cancel button looks fine for now so that piece is good. All othre content looks good too. I've asked @davidclaveau to move the hold pass line in the yellow box because we don't have that hold feature yet (that's my bad for not catching it earlier!) I'll move this one back to in progress to make that update. Then we can deploy through :)

[davidclaveau]

Removed hold pass line and fixed the spacing issue with the "Cancel my pass" button on mobile - good to review!

[manuji]

Tested on TEST: Passed

• Verified that line of text mentioned above has been removed.
• Verified that the "cancel my pass" button has been adjusted to look consistent with rest of the buttons on Mobile view.
• Passing to PO review for approval to deploy to PROD @JLWade

[JLWade]

looks good moving to done