Implement Agency Selection page

[angela-tran]

This task is to implement the agency selection based off the notes from #1090 (comment) and the designs in Figma (once they are finalized).

The backend code will need to change to support this - see the approach outlined in #1197 (comment)

Other ideas that we considered

@thekaveman and I paired a bit to talk through ideas for implementation. Those ideas were:

• a form-based approach, where each card is actually a submit button for a form with a hidden input - the form would need to be handled by /eligibility
• a link-based approach, where each card links to a new URL whose view function simply sets the session agency and forwards to /eligibility
• a link-based approach, where each card links to the existing agency_index URL but with the addition of a query parameter so that agency_index can know to forward to /eligibility - can be something like ?select=true

Acceptance Criteria

• Agency Selection page matches finalized design in Figma
• The user can enter the site from either the index (/) or an agency's index page (e.g. /mst)

Additional context

[thekaveman]

@angela-tran your comment got me thinking about the approach we landed on, and I have yet another idea that is kind of a variation on the second and third options:

/eligibility currently has middleware that requires an agency in the session. The idea is to remove that requirement, and update the URL pattern to allow an (optional) agency slug parameter. So we could have both of these URLs:

• /eligibility
• /eligibility/mst

The former would assume agency is in the session (and throw an exception if not, just like now); the latter would get the agency as an argument to the view function.

This option is similar to how we do e.g. agency selection via URLs already, and avoids the use of the querystring. Thoughts?

[angela-tran]

This option is similar to how we do e.g. agency selection via URLs already, and avoids the use of the querystring. Thoughts?

I like that the cards would be more directly linking to the page they want, that this doesn't add a new URL (just builds upon an existing one), and that it's more consistent with how we're selecting agencies. I think this is better!

[thekaveman]

Final designs provided: https://cal-itp.slack.com/archives/C013W8RUAMU/p1673631693341459

@thekaveman asks:

is the expectation that the modal is opened by default when the user lands on the homepage, or should they have to click the button to open the modal?

@srhhnry responds:

the user has to click the CTA to open the modal. We also added a previous page button on /eligibility and an x on the modal. The concept with those three interactions is to give the user control over the modal