[ENG] Remind user of trial status when 14 & 3 days remain

• Automatically pop out the popover when there are less-than-or-equal-to 14 days & 3 days remaining in their trial
  • We should already have the daysRemaining prop available to us
  • There’s a good section on programmatically showing/hiding popovers in the Bootstrap Vue docs
  • For D14, pop it out starting on day 14, but no later than day 7
  • For D3, pop it out on any day before the end of their trial
  • We’ll keep track of who we’ve shown the popover to, and for which group & which time segment, and we’ll not automatically show them the popover again (until the next time segment)
  • If they click the × button or navigate to a different page, the popover will be closed and won’t automatically show again (until the next time segment is reached)
• Add a × close button to manually close the automatically popped-out popover
  • The automatically popped-out version should close if they interact with that × button or if they navigate to a different page
  • Only show the × button if we’re in “forcibly displayed” mode
  • Rather than recording that they’ve manually clicked the × button, we’ll record that we’ve shown them the popover at all and not automatically show them the popover again if, for example, they simply navigate to a different page in the group area
    • We will remember this detail globally per user using the user_callouts database table so no matter what browser or device they use they will not be shown the same popover for the same time segment
      • This means that if a user is an admin of multiple namespaces which are concurrently in active trails, they will only be forcibly shown the D14 or D3 popover in the first namespace they visit
    • An effort to expand the UserCallout model & table for our desire to keep track per namespace was abandoned when it became clear that it was too complicated for the purposes of getting an experiment out the door
    • We also considered using a session-based value (such as a cookie or localStorage) for this MVC, but that effort ran up against security concerns
      • We thought we could maybe expand the user_callout.js functionality for this purpose, but it is old jQuery-based code and when it dismisses the callout it removes the whole node from the DOM (not what we want)
• Ensure that an automatically displayed popover still fires the “popover displayed” event
  • We will record this event every time the popover is shown, whether it is when they hover on the widget or when we automatically pop it out for the D14 & D3 time segments
  • We would like to either record some extra context about this being automatic or, if that’s tricky, use a separate event
• Run this as an update to the trial status widget experiment

An Example

Each popover should only render once per user per group regardless of how the user interacts with it and I think we can think about each popover as being independent.

For example, I could log in for the first time in a few days on day 12 and I’d see my popover that’s been queued up since day 14. I could select a CTA or the × button or navigate to a different area of the product at which point this popover does not automatically open again for me. 9 days later I log in and I have 3 days remaining in my trial, the day-3 popover will appear. I should get the same experience as before where I can select any CTA, the × button or navigate away and the popover will not render again as I’ve already seen my one viewing of the day-3 popover.

---

Child of #298729 (closed)