Create new modal for learner engagement between resources

[marcellamaki]

Overview:
The new modal should replace the "points" and "next item" snackbars. Instead, the learner: can stay and practice more, move on to the next resource in line, or move on to related resources from a related topic.

Done when:

• Modal displays when a learner completes a resources, in line with the new figma design
• Modal contains new iconography (or placeholder, but in the correct places, if the new icons are a bottleneck. Please add a TODO comment in the code and a note in the PR if the icons still need to be replaced)
• Modal is mobile responsive and correctly displays with the new breakpoints
• Dialog contains:
  1. the points associated with resource completion
  2. an option to stay on the current resource. Note: decision/clarification needed on whether or not there should be some type of mechanism that "resets" progress or place in the resource to the beginning
  3. option to move on to the next resource, if there is a next resource. For this resource, the title should display, along with resource type, and estimated time, if available
  4. related/helpful resources, if available. Note: decision/clarification needed on what exactly these resources should be, and where they should be fetched from. Regardless, the component should be built to render only if this data is available, as not all nodes will have related resources
• The following interactions are working:
  1. Stay here
  2. Move on
  3. Links to related resources

Outside the scope of this issue:

• creating or modifying backend endpoints for related resources (if necessary)

Figma references:

[marcellamaki]

@khangmach / @rtibbles - two points to clarify (mentioned above):

1. If a learner choses to "stay here" - what do they see next? Do they get "sent back to the beginning" or something like that, or does the modal simply close? (Or, something else?)
2. What is the status for "helpful resources" (related resources?) Does this need technical architecting and/or studio support still, or are we repurposing some existing metadata for this?

Please let me know if these questions make sense

[rtibbles]

If a learner choses to "stay here" - what do they see next? Do they get "sent back to the beginning" or something like that, or does the modal simply close? (Or, something else?)

I think the modal simply closing would be the easiest to implement technically - and would mean we leave exactly what that engagement looks like entirely up to the learner.

We could implement a 'restart' public method for the different content types, but I am not sure that the technical effort to achieve that would be reflected in the improved user experience.

What is the status for "helpful resources" (related resources?) Does this need technical architecting and/or studio support still, or are we repurposing some existing metadata for this?

I think for now we can repurpose the existing recommendations_for metadata for the node.

[khangmach]

@marcellamaki yup to echo what Richard said, if the Learner closes the side drawer or chooses to stay, the side drawer just closes and they're left to their own devices on the page. Of course, they can still move ahead to the next resource/topic via the 'lesson plan' icon seen below, which has a yellow dot appended on it to indicate there's more resources to check out!