Add a resource completion modal

[MisRob]

Summary

Removes mastery snackbars in favor of new responsive completion modal.

Note that "Next resources" section at the bottom of a resource page hasn't been removed intentionally as we don't have UI for navigating to the next resource after closing the completion modal yet.

References

• Closes Create new modal for learner engagement between resources #8109
• Figma designs (note that there are some intentional deviations from designs that have emerged from discussions with Khang and @radinamatic )

Reviewer guidance

• Test for smaller resolutions
• Test keyboard navigation
• Test RTL

(A) Channel resource page

1. Login
2. Go to "Learn" -> "Channels"
3. Navigate to a channel resource that you haven't completed yet
4. Finish the resource (e.g. by completing watching a video)
5. See that snackbars with points and a next resource don't appear any more and the modal is displayed instead
6. Interact with the modal - stay on the page, close the modal, go to the next resource, click one of the recommended resources

(B) Channel resource page for anonymous user

Make sure you're logged out and follow (A) steps. In addition to that, check that the warning message is displayed instead of the point obtained on the modal after completing a resource.

(C) Class resource page

1. Login
2. Go to "Learn" -> "Classes"
3. Navigate to a class resource that you haven't completed yet
4. Finish the resource (e.g. by completing watching a video)
5. See that snackbars with points and a next resource don't appear any more and the modal is displayed instead
6. Interact with the modal - stay on the page, close the modal, go to the next resource, click one of the recommended resources

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[radinamatic]

Looking good to me @MisRob! 💯

Tested as signed in and anonymous user, in RTL, and on small resolutions. Keyboard navigation works well, focus is trapped inside modal and with logical order of interactive elements. 🙂

RTL mobile	RTL

[marcellamaki]

I've done a first read and so far it looks great, but I got to this later in the day than I was expecting and want to give it another look in the morning when my brain is fresher to be sure I'm not missing anything. But nice work @MisRob - appreciate (as always) your super clean code and all of the comments 😊

[marcellamaki]

Looks great, @MisRob! ✅