feat: Adds SuitesReminder hook to get a consistent look across platfo…

…rms for the reminder notification (#221)

Co-authored-by: jared-dickman <zenador15@gmail.com>

src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx

@@ -1,14 +1,15 @@
 import { type Meta, type StoryObj } from '@storybook/react'
-import { expect, screen, userEvent } from '@storybook/test'
+import { expect, fn, screen, userEvent } from '@storybook/test'
 import React from 'react'
-import { Button, Center, GlobalNavigation, Icon, type INavigationCreateProps, Space } from 'src/components'
+import { Button, Center, Flex, GlobalNavigation, Icon, type INavigationCreateProps, Space } from 'src/components'
 import { Badge } from 'src/components/data-display/Badge/Badge'
 import {
   type IGlobalNavigationItem,
   type IGlobalNavigationLogo,
 } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 import { generateOrgs } from 'src/components/navigation/GlobalNavigation/stories-utils'
 import { type INavigationOrg } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorItems'
+import { useSuitesReminder } from 'src/hooks/SuitesReminder/useSuitesReminder'
 
 const defaultLogo: IGlobalNavigationLogo = {
   label: 'Aqua',
@@ -997,3 +998,65 @@ export const WorkspaceSearchWithNoResults: Meta<typeof GlobalNavigation> = {
     await userEvent.type(searchInput, '123{enter}')
   },
 }
+
+export const UseSuitesReminderHook: Story = {
+  play: async () => {
+    const alert = fn().mockImplementation(() => {})
+    global.alert = alert
+
+    const showNotificationBtn = screen.getByText('Show Notification')
+    await userEvent.click(showNotificationBtn)
+
+    // Remind me later
+    const remindMeLaterBtn = await screen.findByText('Remind me later')
+    await userEvent.click(remindMeLaterBtn)
+
+    await expect(alert).toBeCalledWith('Remind me later')
+
+    // Take me there
+    await userEvent.click(showNotificationBtn)
+
+    const takeMeThereBtn = await screen.findByText('Take me there')
+    await userEvent.click(takeMeThereBtn)
+
+    await expect(alert).toBeCalledWith('Take me there')
+  },
+  render: props => {
+    const [openNotification, contextHolder] = useSuitesReminder({
+      onClose: () => {
+        alert('Notification closed')
+      },
+      onRemindMeLater: () => {
+        alert('Remind me later')
+      },
+      onTakeMeThere: () => {
+        alert('Take me there')
+      },
+    })
+
+    return (
+      <Flex style={{ minHeight: 800, width: 600, border: '1px solid black' }} justify="space-between" vertical={false}>
+        {contextHolder}
+        <div>
+          <GlobalNavigation {...props}></GlobalNavigation>
+        </div>
+        <Button onClick={openNotification}>Show Notification</Button>
+      </Flex>
+    )
+  },
+  args: {
+    logo: defaultLogo,
+    tools: defaultTools,
+    management: defaultManagement,
+    orgs: defaultOrgs,
+    navigationButtonItemOptions: {
+      label: 'Sign Out of mParticle',
+      onClick: () => {
+        alert('signing out!')
+      },
+    },
+    onMpHomeClick: () => {
+      alert('Going to mP!')
+    },
+  },
+}

src/components/navigation/GlobalNavigation/GlobalNavigation.tsx

@@ -14,6 +14,7 @@ import { NavigationCreate } from 'src/components/navigation/GlobalNavigation/Nav
 import { WorkspaceSelector } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector'
 import { type IGlobalNavigationItem } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 import { NavigationItem } from 'src/components/navigation/GlobalNavigation/NavigationItem'
+import { useSuitesReminder } from 'src/hooks/SuitesReminder/useSuitesReminder'
 import { Popover } from 'antd'
 import MiniMap from 'src/components/navigation/MiniMap/MiniMap'
 
@@ -101,3 +102,5 @@ export const GlobalNavigation = (props: IGlobalNavigationProps) => {
     </Layout>
   )
 }
+
+GlobalNavigation.useSuitesReminder = useSuitesReminder

src/hooks/SuitesReminder/suites-reminder.css

@@ -0,0 +1,3 @@
+.globalNavigation__suitesReminder.globalNavigation__suitesReminder-bottomLeft {
+    left: calc(var(--nav-width) + var(--margin-xs)) !important;
+}

src/hooks/SuitesReminder/useSuitesReminder.tsx

@@ -0,0 +1,77 @@
+import 'src/styles/_variables.css'
+import './suites-reminder.css'
+import { type ReactNode } from 'react'
+import { Button, notification, Space } from 'src/components'
+import { FontWeightStrong } from 'src/styles/style'
+
+export interface ISuitesReminderOptions {
+  onClose: () => void
+  onRemindMeLater: () => void
+  onTakeMeThere: () => void
+  duration?: number
+  title?: string
+  message?: string
+}
+
+type OpenNotificationFn = () => void
+type ContextHolder = ReactNode
+
+export type SuitesReminderHook = [OpenNotificationFn, ContextHolder]
+
+const DefaultReminderDuration = 4.5 as const // same as antd notification default duration
+const DefaultTitle = 'Join the new mParticle Experience!' as const
+const DefaultMessage =
+  'Managing your data is easier than ever with the new mParticle experience. Try out the latest features with ease, and switch back to the classic experience anytime from the side navigation.' as const
+
+export const useSuitesReminder = (options: ISuitesReminderOptions): SuitesReminderHook => {
+  const {
+    onClose,
+    onRemindMeLater,
+    onTakeMeThere,
+    duration = DefaultReminderDuration,
+    title = DefaultTitle,
+    message = DefaultMessage,
+  } = options
+
+  const [notificationApi, contextHolder] = notification.useNotification({
+    prefixCls: 'globalNavigation__suitesReminder',
+    duration,
+    placement: 'bottomLeft',
+  })
+
+  const openNotification = (): void => {
+    const key = `notification-${Date.now()}`
+    const btn = (
+      <Space>
+        <Button
+          type="link"
+          size="small"
+          onClick={_event => {
+            onRemindMeLater()
+            notificationApi.destroy(key)
+          }}>
+          Remind me later
+        </Button>
+        <Button
+          type="primary"
+          size="small"
+          onClick={_event => {
+            onTakeMeThere()
+            notificationApi.destroy(key)
+          }}>
+          Take me there
+        </Button>
+      </Space>
+    )
+
+    notificationApi.open({
+      message: <span style={{ fontWeight: FontWeightStrong }}>{title}</span>,
+      description: message,
+      btn,
+      key,
+      onClose,
+    })
+  }
+
+  return [openNotification, contextHolder]
+}