feat(ui): refine club, packs, and download flows

src/screens/Production/PlaybackDownload.js

@@ -6,7 +6,6 @@ import * as FileSystem from 'expo-file-system'
 import { shareAsync } from 'expo-sharing'
 import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
 import BorderGradientButton from '../../components/BorderGradientButton'
-import GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import AppCheckbox from '../../components/AppCheckbox'
 import firebase, { getFunctionsClient, projectsRef, serverTimestamp } from '../../config/firebase'
@@ -178,7 +177,6 @@ const PlaybackDownload = ({ route }) => {
   const downloadLabel = canDownloadPlayback
     ? 'Télécharger le playback'
     : 'Acheter le playback pour 1,99€'
-  const showSubscriptionCta = !hasActiveSubscription
 
   const afterPlaybackUrl = useMemo(() => {
     if (!videos) return null
@@ -434,55 +432,43 @@ const PlaybackDownload = ({ route }) => {
         <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
           <CreateLyricsHeader title={'Publier ton playback'} />
 
-          <View style={styles.coverRow}>
-            {projectForDownload?.coverUrl ? (
-              <ExpoImage
-                source={{ uri: projectForDownload?.coverUrl }}
-                style={styles.coverImage}
-                contentFit="cover"
-              />
-            ) : (
-              <View style={[styles.coverImage, styles.coverPlaceholder]}>
-                <Text style={styles.placeholderText}>Aucune pochette</Text>
+          <ClubAdvantagesCard
+            style={styles.clubCardSpacing}
+            topContent={
+              <View style={styles.coverRow}>
+                {projectForDownload?.coverUrl ? (
+                  <ExpoImage
+                    source={{ uri: projectForDownload?.coverUrl }}
+                    style={styles.coverImage}
+                    contentFit="cover"
+                  />
+                ) : (
+                  <View style={[styles.coverImage, styles.coverPlaceholder]}>
+                    <Text style={styles.placeholderText}>Aucune pochette</Text>
+                  </View>
+                )}
+
+                <View style={styles.downloadColumn}>
+                  <Pressable
+                    style={[
+                      styles.downloadTile,
+                      (isPublishing || isDownloading || isCheckoutLaunching) && { opacity: 0.6 },
+                    ]}
+                    onPress={handleDownloadPress}
+                    disabled={isPublishing || isDownloading || isCheckoutLaunching}
+                  >
+                    <MaterialCommunityIcons name="download" size={22} color={Palette.white} />
+                    <Text style={styles.downloadText}>{downloadLabel}</Text>
+                  </Pressable>
+                  {!canDownloadPlayback && downloadPaymentPending ? (
+                    <Text style={styles.downloadPendingText}>
+                      Paiement en attente de confirmation...
+                    </Text>
+                  ) : null}
+                </View>
               </View>
-            )}
-
-            <Pressable
-              style={[
-                styles.downloadTile,
-                (isPublishing || isDownloading || isCheckoutLaunching) && { opacity: 0.6 },
-              ]}
-              onPress={handleDownloadPress}
-              disabled={isPublishing || isDownloading || isCheckoutLaunching}
-            >
-              <MaterialCommunityIcons name="download" size={22} color={Palette.white} />
-              <Text style={styles.downloadText}>{downloadLabel}</Text>
-            </Pressable>
-            {!canDownloadPlayback && downloadPaymentPending ? (
-              <Text style={styles.downloadPendingText}>
-                Paiement en attente de confirmation...
-              </Text>
-            ) : null}
-          </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} />
+            }
+          />
 
           <View style={styles.publishConsentContainer}>
             <AppCheckbox
@@ -546,6 +532,10 @@ const styles = StyleSheet.create({
     fontSize: 15,
     color: Palette.white,
   },
+  downloadColumn: {
+    alignItems: 'center',
+    gap: 4,
+  },
   downloadPendingText: {
     marginTop: 6,
     fontFamily: FONT_FAMILY.InterRegular,
@@ -553,22 +543,6 @@ const styles = StyleSheet.create({
     color: Palette.white,
     opacity: 0.8,
   },
-  subscriptionCta: {
-    alignItems: 'center',
-    gap: 10,
-    marginTop: 6,
-  },
-  subscriptionNote: {
-    fontFamily: FONT_FAMILY.InterRegular,
-    fontSize: 13,
-    color: Palette.white,
-    opacity: 0.8,
-    textAlign: 'center',
-  },
-  subscriptionButton: {
-    width: '100%',
-    maxWidth: 280,
-  },
   clubCardSpacing: {
     marginTop: 10,
   },