[MPDX-8393] Make the Helpjuice beacon dismissable

[canac]

Description

Make the Helpjuice beacon dismissable. There is a new Hide Beacon link in the beacon widget that dismisses the beacon. Once dismissed, the beacon peeks just barely out from the right side of the screen. Hovering over it causes it to slide out, and clicking on it makes it no longer dismissed.

On most pages, the dismissed preference is saved to a persistent user preference. On login and error pages, we don't have an Apollo client, so the preference can't be persisted, but the beacon can still be temporarily dismissed until the next page load.

I had to jump through some hoops to get this to work, but the complexity is abstracted away into the Helpjuice component, and the comments for ApolloBeacon and NoApolloBeacon should describe what is going on. I chose not to do something like this because although it might technically work, it violates React's rules of hooks that hooks must not be conditionally called.

const hasApolloClient = !useContext(getApolloContext());
const [dismissed, setDismissed] = hasApolloClient
  ? useUserPreference({
      key: 'beacon_dismissed',
      defaultValue: false,
    })
  : useState(false);
  return <DismissableBeacon dismissed={dismissed} setDismissed={setDismissed} />;

MPDX-8393

Checklist:

• I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
• I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
• I have requested a review from another person on the project

[github-actions]

Preview branch generated at https://8393-dismiss-beacon.d3dytjb8adxkk5.amplifyapp.com

[github-actions]

Bundle sizes [mpdx-react]

Compared against 559211c

Route	Size (gzipped)	Diff
/_app	375.28 KB	+1.25 KB
/accountLists/[accountListId]/setup/finish	86.42 KB	-1.1 KB

[dr-bizz]

The code looks great, but when I test it on the preview link, the beacon is visible after a refresh

[canac]

@dr-bizz Good catch! I messed up the hasApolloCheck.

[dr-bizz]

One thought I had to improve the Help Jiuce beacon is when it is clicked, the icon changes to a close button, as it isn't obvious you have to click it again to close it, and some users might click on hide beacon thinking it will just close the beacon.

[dr-bizz]

This is awesome! Thank you for adding on the x icon when it's open! it adds a lot to the user experience.