residential-redesign-tech-plan.md

Motivation

• Allow Marketing team/non-engineers to be able to make adjustments to Residential page copy and assets
• Bring Residential page up to spec with current Rhino design thinking and patterns
• Update page using latest Engineering patterns
• Adjust signup flow to use Chilipiper for top 3 portfolio sizes

Approach

Contentful

• Create a new content type, "ResidentialPage"
• Create content types for the modules that we plan on using in the page
• Fill in the actual content using copy and assets from the Figma file

SayRhino application

• Add a feature flag with Flipper; display updated Residential page if flag is on
• Decision point: Fetch residential page content using current "get all content" strategy OR refactor to only fetch content for one page at a time OR fetch content client-side
  • We currently fetch all content for the homepage and signup flow before rendering the homepage
  • The simplest path forward code-wise would be to simply add the Residential content to the list of content we're fetching
  • This would, however, mean we're fetching more content than necessary when fetching several important pages
  • Another option is to refactor so that we only fetch (and cache) specific individual content types, rather than fetching all content at once
  • Another option: fetch things client-side using a similar pattern to the useContentful hook
  • Contentful content is available via a GraphQL API, which seems like it would be ideal for a frontend like this - likely out of scope for this project, but flagging in case there's interest in starting to work with GQL at Rhino
• Decision point: render a root-level React component OR use HAML to render content from Contentful and occasionally inject React components (which is what the Homepage does)?
  • Are there existing React comopnents that we can reuse?
  • Matt's preference: render a single React component and put all of the client
  • Why?
    • Allows us to define types for the Contentful content
    • I'm more comfortable working in React ¯\_(ツ)_/¯

Questions/decisions

• Is every single bit of text + every asset on the page backed by Contentful? Are some hardcoded?
  • Yes, it should all come from Contentful
• The designs don't have the residential / commercial toggle that appears in the top of the current page. Are we dropping that? If so, is it getting linked from somewhere else?
  • We're dropping that toggle from this page, TBD if we're dropping the page entirely
• What's the preferred method of handling breakpoints?
  • OfferingRhinoIsSimpleModule is an example of a component with separate renderDesktop and renderMobile methods - is this the creme de la creme?
  • Suggestion: I've worked with styled-system before and found it easy to use, especially when it comes to responsive content (avoids rendering separate components for Mobile + Desktop). Worth considering?
• Do we need a backup file, similar to what exists for the homepage?

Context

Design doc for initial implementation of Contentful for homepage: https://github.com/sayrhino/www.sayrhino.com/issues/3619