feat: share and credits modal

src/screens/cover/SongDownload.js

@@ -32,6 +32,9 @@ import { isWeb } from '../../hooks/useLayoutType'
 import { getArtistDisplayName } from '../../utils/artistName'
 import { toDate } from '../../utils/dateFormatting'
 import SubscriptionConfirmModal from '../../components/SubscriptionConfirmModal'
+import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
+import AdventureChoiceModal from './components/AdventureChoiceModal'
+import ShareAndCreditsModal from './components/ShareAndCreditsModal'
 
 const SongDownload = ({ route }) => {
   const {
@@ -45,6 +48,11 @@ const SongDownload = ({ route }) => {
   const [isDownloading, setIsDownloading] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
   const [hasAcceptedPublication, setHasAcceptedPublication] = useState(true)
+  const { videos } = useUser()
+  const part1Url = isWeb ? videos?.benaiPart1 : videos?.benaiPart1
+  const [showIntro, setShowIntro] = useState(null)
+  const [showAdventureModal, setShowAdventureModal] = useState(false)
+  const [showShareModal, setShowShareModal] = useState(false)
 
   const projectForStage = useMemo(
     () => routeProject || selectedProject || null,
@@ -145,11 +153,30 @@ const SongDownload = ({ route }) => {
       return
     }
     if (hasActiveSubscription) {
-      continueFlow()
+      if (part1Url) {
+        setShowIntro(part1Url)
+      } else {
+        continueFlow()
+      }
       return
     }
     setShowConfirmModal(true)
-  }, [continueFlow, hasAcceptedPublication, hasActiveSubscription, setTooltip])
+  }, [continueFlow, hasAcceptedPublication, hasActiveSubscription, part1Url, setTooltip])
+
+  const handleCloseIntro = useCallback(() => {
+    setShowIntro(null)
+    setShowAdventureModal(true)
+  }, [])
+
+  const handleContinueAdventure = useCallback(() => {
+    setShowAdventureModal(false)
+    continueFlow()
+  }, [continueFlow])
+
+  const handleStopAdventure = useCallback(() => {
+    setShowAdventureModal(false)
+    setShowShareModal(true)
+  }, [])
 
   const handleDownload = useCallback(async () => {
     const downloadUrl =
@@ -410,7 +437,30 @@ const SongDownload = ({ route }) => {
         isVisible={showConfirmModal}
         setIsVisible={setShowConfirmModal}
         onJoinClub={() => navigate(Routes.Payments)}
-        onContinue={continueFlow}
+        onContinue={() => {
+          if (part1Url) {
+            setShowIntro(part1Url)
+          } else {
+            continueFlow()
+          }
+        }}
+      />
+      <FullscreenIntroVideo url={showIntro} visible={!!showIntro} onClose={handleCloseIntro} />
+      <AdventureChoiceModal
+        isVisible={showAdventureModal}
+        setIsVisible={setShowAdventureModal}
+        onContinue={handleContinueAdventure}
+        onStop={handleStopAdventure}
+      />
+      <ShareAndCreditsModal
+        isVisible={showShareModal}
+        setIsVisible={setShowShareModal}
+        onNavigateToCredits={() => {
+          setShowShareModal(false)
+          navigate(Routes.DownloadPrices, { action: 'song' })
+        }}
+        project={projectForStage}
+        selectedOption={selectedOption}
       />
     </Page>
   )