pay for playback download checkout

src/screens/cover/SongDownload.js

@@ -13,6 +13,7 @@ import {
 import useMinuit from 'react-native-minuit/src/hooks/useMinuit.js'
 import * as FileSystem from 'expo-file-system'
 import * as Sharing from 'expo-sharing'
+import GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import Page from '../../layouts/Page'
 import { Routes } from '../../navigation/Routes'
@@ -103,6 +104,7 @@ const SongDownload = ({ route }) => {
   const downloadLabel = canDownloadDirectly
     ? 'Télécharger mon morceau'
     : 'Acheter ce morceau pour 1,99€'
+  const showSubscriptionCta = !hasActiveSubscription
   const shouldShowDownloadPage = adventureChoice === 'stop'
 
   useEffect(() => {
@@ -530,6 +532,23 @@ const SongDownload = ({ route }) => {
             </View>
           </View>
 
+          {showSubscriptionCta ? (
+            <View style={styles.subscriptionCta}>
+              <Text style={styles.subscriptionNote}>
+                Avec un abonnement, le téléchargement est gratuit.
+              </Text>
+              <GradientButton
+                title="Voir les abonnements"
+                onPress={() => navigate(Routes.Payments)}
+                containerStyle={styles.subscriptionButton}
+              />
+            </View>
+          ) : (
+            <Text style={styles.subscriptionNote}>
+              Avec ton abonnement, le téléchargement est gratuit.
+            </Text>
+          )}
+
           <ClubAdvantagesCard style={styles.clubCardSpacing} />
         </ScrollView>
       ) : (
@@ -620,6 +639,22 @@ const styles = StyleSheet.create({
     color: Palette.white,
     opacity: 0.8,
   },
+  subscriptionCta: {
+    alignItems: 'center',
+    gap: gutters * 0.6,
+    marginTop: gutters * 0.4,
+  },
+  subscriptionNote: {
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 13,
+    color: Palette.white,
+    opacity: 0.8,
+    textAlign: 'center',
+  },
+  subscriptionButton: {
+    width: '100%',
+    maxWidth: 280,
+  },
   adventureGatePlaceholder: {
     flex: 1,
   },