first commit

services/web/frontend/js/shared/hooks/promotions/use-tutorial.tsx

@@ -0,0 +1,101 @@
+import { useCallback, useState } from 'react'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import { postJSON } from '@/infrastructure/fetch-json'
+import { debugConsole } from '@/utils/debugging'
+import { useEditorContext } from '@/shared/context/editor-context'
+
+export const useTutorial = (
+  tutorialKey: string,
+  eventData: Record<string, any> = {}
+) => {
+  const [showPopup, setShowPopup] = useState(false)
+
+  const { deactivateTutorial, currentPopup, setCurrentPopup } =
+    useEditorContext()
+
+  const completeTutorial = useCallback(
+    async ({
+      event = 'promo-click',
+      action = 'complete',
+      ...rest
+    }: {
+      event: 'promo-click' | 'promo-dismiss'
+      action: 'complete' | 'postpone'
+    } & Record<string, any>) => {
+      eventTracking.sendMB(event, { ...eventData, ...rest })
+      try {
+        await postJSON(`/tutorial/${tutorialKey}/${action}`)
+      } catch (err) {
+        debugConsole.error(err)
+      }
+      setShowPopup(false)
+      deactivateTutorial(tutorialKey)
+    },
+    [deactivateTutorial, eventData, tutorialKey]
+  )
+
+  const dismissTutorial = useCallback(async () => {
+    await completeTutorial({
+      event: 'promo-dismiss',
+      action: 'complete',
+    })
+  }, [completeTutorial])
+
+  const maybeLater = useCallback(async () => {
+    await completeTutorial({
+      event: 'promo-click',
+      action: 'postpone',
+      button: 'maybe-later',
+    })
+  }, [completeTutorial])
+
+  // try to show the popup if we don't already have one showing, returns true if it can show, false if it can't
+  const tryShowingPopup = useCallback(
+    (eventName: string = 'promo-prompt') => {
+      if (currentPopup === null) {
+        setCurrentPopup(tutorialKey)
+        setShowPopup(true)
+        eventTracking.sendMB(eventName, eventData)
+        return true
+      }
+      return false
+    },
+    [currentPopup, setCurrentPopup, tutorialKey, eventData]
+  )
+
+  const clearPopup = useCallback(() => {
+    // popups should only clear themselves, in cases they need to cleanup or shouldnt show anymore
+    // allow forcing the clear if needed, eg: higher prio alert needs to show
+    if (currentPopup === tutorialKey) {
+      setCurrentPopup(null)
+      setShowPopup(false)
+    }
+  }, [setCurrentPopup, setShowPopup, currentPopup, tutorialKey])
+
+  const clearAndShow = useCallback(
+    (eventName: string = 'promo-prompt') => {
+      setCurrentPopup(tutorialKey)
+      setShowPopup(true)
+      eventTracking.sendMB(eventName, eventData)
+    },
+    [setCurrentPopup, setShowPopup, tutorialKey, eventData]
+  )
+
+  const hideUntilReload = useCallback(() => {
+    clearPopup()
+    deactivateTutorial(tutorialKey)
+  }, [clearPopup, deactivateTutorial, tutorialKey])
+
+  return {
+    completeTutorial,
+    dismissTutorial,
+    maybeLater,
+    tryShowingPopup,
+    clearPopup,
+    clearAndShow,
+    showPopup,
+    hideUntilReload,
+  }
+}
+
+export default useTutorial