[M] DUP Facility specific messaging added to GARIBALDI DUP confirmation pages

[meyerdarcie]

Description:

As a Garibaldi visitor, I want to get park specific information so that I can be better prepared.

As a bc parks staff, I want to provide park specific information after a user has booked a day use pass so they can be better prepared. This is part of responsible recreation messaging.

Acceptance Criteria:

• [ ] Update Garibaldi confirmation pages with approved text and links as per the design ticket: https://github.com/bcgov/parks-reso-public/issues/399
• [ ]

Development Checklist:

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

Dependencies

• Blocked by #399
• Blocking

Relevant documentation as reference

Definition of Ready

• [ ] Acceptance criteria are included
• [ ] Wireframes are included (if applicable)
• [ ] Design / Solution is accepted by Product Owner (if applicable)
• [ ] 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

Notes:

[Dianadec]

Confirming with Nicole whether we need to wait for the icons to be decided for the new bullets. https://www.figma.com/design/2lQW8InOa0lEiUiMeGmeNC/Day-Use-Pass?node-id=5046-2432&t=OasmEf9QLpmr4REv-1

@meyerdarcie @ndelraye

[ndelraye]

Yes, this ticket is blocked until we get decisions on the new icons, will try to get them today

[Dianadec]

Icons have now been added. See design ticket

[manuji]

Tested on TEST: Pending

• Need more space between the Safety information section and the Visitor guidelines heading.

@ndelraye & @Christopher-walsh22 , I tested the confirmation page on mobile view and noticed that the components are stacked one under the other nicely, but the "Print" button placement is not right below the QR code. Is it as per the design?

Refer to the video below;

https://github.com/user-attachments/assets/38f297e9-f10e-4e6f-a58d-f6a241785306

[Christopher-walsh22]

@manuji just wanted to leave some screenshots of the fixes Im putting in for this. Let me know if I am missing anything :)

Print button moved to above safety information when mobile:

Diamond Head Spacing and alignment:

[manuji]

Tested on TEST: Passed

• verified that this task has been completed and the issues have been fixed.
• Passing to PO review before PROD deployment.

Thank you very much @Christopher-walsh22

[meyerdarcie]

Looks good and working as intended, moving to done.