last fixes, home and videos

src/screens/Profile/ManageSubscription.js

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { Alert, Platform, StyleSheet, Text, View } from "react-native";
 
 import BorderGradientButton from "../../components/BorderGradientButton";
+import CreditAmount from "../../components/CreditAmount";
 import { background } from "../../assets";
 import { getFunctionsClient } from "../../config/firebase";
 import Page from "../../layouts/Page";
@@ -44,19 +45,6 @@ const PERIOD_LABELS = {
 
 const PAGE_BACKGROUND_COLOR = "#303438";
 
-const formatCoinsAmount = (value) => {
-  if (typeof value !== "number" || !Number.isFinite(value)) {
-    return null;
-  }
-  try {
-    return new Intl.NumberFormat("fr-FR", {
-      maximumFractionDigits: 0,
-    }).format(value);
-  } catch (_error) {
-    return `${Math.round(value)}`;
-  }
-};
-
 const getStatusColors = (status) => {
   switch (status) {
     case "trialing":
@@ -384,11 +372,6 @@ const ManageSubscription = ({ navigation }) => {
       typeof coinsPerMonth === "number" && Number.isFinite(coinsPerMonth)
         ? Math.round(coinsPerMonth)
         : null;
-    const coinsPerMonthLabel =
-      normalizedCoins !== null
-        ? `${formatCoinsAmount(normalizedCoins)} coins`
-        : null;
-
     const nextGrantTimestamp =
       currentUserData?.subscriptionNextGrantAt ||
       currentUserData?.subscriptionGrantNextAt ||
@@ -434,11 +417,6 @@ const ManageSubscription = ({ navigation }) => {
         "Ton abonnement n'est plus actif. Tu peux souscrire à nouveau à tout moment.",
       );
     }
-    if (isAnnual && coinsPerMonthLabel) {
-      helperMessages.push(
-        `Tes crédits sont versés chaque mois (${coinsPerMonthLabel}).`,
-      );
-    }
     const helperMessage = helperMessages.join("\n");
 
     return {
@@ -462,7 +440,6 @@ const ManageSubscription = ({ navigation }) => {
         currentUserData?.stripeSubscription?.subscriptionId ||
         null,
       coinsPerMonth: normalizedCoins,
-      coinsPerMonthLabel,
       isAnnual,
       nextGrantDate: resolvedNextGrantDate,
       nextGrantLabel,
@@ -614,9 +591,15 @@ const ManageSubscription = ({ navigation }) => {
 
               <View style={styles.detailRow}>
                 <Text style={styles.detailLabel}>Crédits mensuels</Text>
-                <Text style={styles.detailValue}>
-                  {subscriptionInfo.coinsPerMonthLabel || "—"}
-                </Text>
+                {typeof subscriptionInfo.coinsPerMonth === "number" ? (
+                  <CreditAmount
+                    value={subscriptionInfo.coinsPerMonth}
+                    textStyle={styles.detailValue}
+                    iconSize={18}
+                  />
+                ) : (
+                  <Text style={styles.detailValue}>—</Text>
+                )}
               </View>
 
               {subscriptionInfo.isAnnual && subscriptionInfo.nextGrantLabel ? (
@@ -659,6 +642,20 @@ const ManageSubscription = ({ navigation }) => {
                   {subscriptionInfo.helperMessage}
                 </Text>
               ) : null}
+              {subscriptionInfo.isAnnual &&
+              typeof subscriptionInfo.coinsPerMonth === "number" ? (
+                <View style={styles.helperInlineRow}>
+                  <Text style={styles.helperText}>
+                    Tes pièces sont versées chaque mois (
+                  </Text>
+                  <CreditAmount
+                    value={subscriptionInfo.coinsPerMonth}
+                    textStyle={styles.helperText}
+                    iconSize={14}
+                  />
+                  <Text style={styles.helperText}>)</Text>
+                </View>
+              ) : null}
             </View>
 
             {successMessage ? (
@@ -767,6 +764,12 @@ const styles = StyleSheet.create({
     lineHeight: 18,
     color: Palette.grayMid,
   },
+  helperInlineRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: 4,
+  },
   successMessage: {
     fontFamily: FONT_FAMILY.InterMedium,
     fontSize: 14,