feat: coin packs

src/screens/Subscriptions.js

@@ -240,6 +240,33 @@ const PLAN_DISPLAY_NAME_BY_KEY = {
   premium: 'Play Backer Gold',
 }
 
+const COIN_PACK_DETAILS = {
+  starter: {
+    label: 'Pack starter',
+    creditsDisplay: '50 Crédits',
+    disclaimer: '*Non-Eligible au concours Chanson/Vidéo',
+  },
+  medium: {
+    label: 'Pack Medium',
+    creditsDisplay: '100 Crédits + 50 offerts',
+    disclaimer: '*Non-Eligible au concours Chanson/Vidéo',
+  },
+  premium: {
+    label: 'Pack Premium',
+    creditsDisplay: '150 Crédits + 100 offerts',
+    disclaimer: '*Non-Eligible au concours Chanson/Vidéo',
+  },
+}
+
+const getCoinPackKey = (pack) => {
+  const name = (pack?.name || '').toLowerCase()
+  if (name.includes('starter')) return 'starter'
+  if (name.includes('medium')) return 'medium'
+  if (name.includes('premium') || name.includes('prenium') || name.includes('creator'))
+    return 'premium'
+  return null
+}
+
 const PLAN_DETAILS = {
   starter: {
     creditsLabel: '50 Crédits / Mois',
@@ -746,15 +773,28 @@ export default function Subscriptions() {
                         const price = formatCurrency(rawAmount, pack.currency)
                         // Assuming pack structure: { id, name, unitAmount/amount, currency, metadata: { coins: 100 } }
                         const coins = Number(pack.metadata?.coins || 0)
+
+                        const packKey = getCoinPackKey(pack)
+                        const details = packKey ? COIN_PACK_DETAILS[packKey] : null
+                        const displayName = details?.label || pack.name
+                        const creditsText = details?.creditsDisplay
+
                         return (
                           <View key={pack.productId} style={styles.creditCard}>
-                            <View>
-                              <Text style={styles.creditName}>{pack.name}</Text>
-                              <CreditAmount
-                                value={coins}
-                                iconSize={24}
-                                textStyle={styles.creditAmountText}
-                              />
+                            <View style={styles.creditInfoContainer}>
+                              <Text style={styles.creditName}>{displayName}</Text>
+                              {creditsText ? (
+                                <Text style={styles.creditAmountCustom}>{creditsText}</Text>
+                              ) : (
+                                <CreditAmount
+                                  value={coins}
+                                  iconSize={24}
+                                  textStyle={styles.creditAmountText}
+                                />
+                              )}
+                              {details?.disclaimer ? (
+                                <Text style={styles.packDisclaimer}>{details.disclaimer}</Text>
+                              ) : null}
                             </View>
                             <GradientButton
                               title={
@@ -974,6 +1014,24 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginBottom: 4,
   },
+  creditInfoContainer: {
+    alignItems: 'center',
+    gap: 4,
+  },
+  creditAmountCustom: {
+    fontFamily: FONT_FAMILY.InterBold,
+    fontSize: 16,
+    color: Palette.white,
+    textAlign: 'center',
+  },
+  packDisclaimer: {
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 10,
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontStyle: 'italic',
+    textAlign: 'center',
+    marginTop: 4,
+  },
   creditAmountText: {
     fontSize: 20,
   },