1848429 - Update the opt-in message's primary CTA so it cleans up the React content when user opts in

Status: NEW

(Firefox :: Messaging System, task, P3)

Description

[Shane Hughes [:aminomancer]]

Right now, when user hits the primary CTA, the opt-in message stops being rendered because shopping-container.mjs sees that the optedIn state has changed, triggers a re-render, and does not render the slot in which the opt-in message is displayed. But the opt-in message still exists in the DOM, it's just not rendered.

The way it works is: the opt-in message's root element is a child element of the custom element shopping-container. Which means in light DOM, it's part of the document. But shopping-container's definition is such that child elements aren't rendered except as slotted elements. So if there's no matching slot, it's effectively hidden.

So when the slot is removed, the opt-in message is visually hidden. But the content is still there. Not a critical issue but it might cause problems if we ever want to show multiple messages per page load. So we should remove message roots in the sidebar when those messages are dismissed.

I added that capability to AWFinish in bug 1843461. We're just not using it currently because the message doesn't actually call AWFinish. The way to call it would be to add dismiss: true to the primary_button's action. For other messages we might want to use navigate: true instead, so that it waits for transitions to finish before removing the content. But for the opt-in message, the re-render happens immediately, so we should remove the content immediately as well.