[FE/BE] Media Release Form

[parkerra]

Overview

Caregivers can sign a Media Release Form to allow for Motherhood Beyond Bars to use the uploaded baby photos on their websites or on their social media. This is an optional waiver that will appear when mothers first open the Baby Book, and they can continue without signing it. If they do not sign it, the form should still appear under Waivers in the Resources tab with the option to sign it later.

Link to Figma: https://www.figma.com/design/1eq6iy7h2Cd7rYTxPB4s5P/Motherhood-Beyond-Bars-%2F-Spr2022-(Copy)?node-id=6212-1439&node-type=CANVAS&t=IzQT02xW96dasVs1-0

Requirements

• Frontend for Media Release Waiver, create for mobile views first then expand to desktop
  • Fetch the waiver from the database by either the name or unique document ID and display the waiver on this page
  • Create the "Don't Share?" modal if the user decides not to sign it
• Show this page if a Caregiver is assigned a child but hasn't used the Baby Book feature yet (both has zero photos uploaded and has already singed the waiver)
• If a Caregiver does not sign the waiver, they should have the option to later sign it in the Waivers tab in Resources. The option to sign it with a checkbox, and text inputs for their name and date should appear under the waiver in the Waiver tab in the accordion file for the Media Release Waiver

Important Information

• Make pages for mobile first, then extend them to Desktop
  • Use Tailwind's reactive design breakpoints to style for both mobile and web: https://tailwindcss.com/docs/responsive-design
• Use DevTools to resize the screen for different screen sizes including tablets both vertically and horizontally
• Test this on your phone, it's important for making sure the keyboard doesn't cover anything and native components look alright!

Testing on Phone

Run the program on your computer using npm run dev, then on your phone on different common browsers (Google Chrome, Firefox, and Safari if iPhone), go to https://[your IP address]:[port (probably 3000)]/page. Example: https://123.45.67.89:3000/login. Make sure both your phone and laptop are connected to the same WiFi.

How to find your computer's IP Address:

• Windows: ipconfig then scroll to Wireless LAN adapter Wi-Fi -> IPv4 Address
• Mac: ipconfig getifaddr en0

Don't hesitate to Slack me if you need any help or have any questions :D We can message or jump into a Huddle meeting as needed!