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,

src/screens/Profile/OrderHistory.js

@@ -13,6 +13,7 @@ import Page from "../../layouts/Page";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import CreditAmount from "../../components/CreditAmount";
 
 const ORDER_TYPE_LABELS = {
   GIFT: "Crédit offert",
@@ -21,19 +22,6 @@ const ORDER_TYPE_LABELS = {
   SUBSCRIPTION: "Abonnement",
 };
 
-const formatCoins = (amount) => {
-  if (typeof amount !== "number" || !Number.isFinite(amount)) {
-    return "0";
-  }
-  try {
-    return new Intl.NumberFormat("fr-FR", {
-      maximumFractionDigits: 0,
-    }).format(amount);
-  } catch (_error) {
-    return `${amount}`;
-  }
-};
-
 const formatDateParts = (date) => {
   if (!date) {
     return {
@@ -133,9 +121,10 @@ const OrderHistory = () => {
         ? item.amount
         : 0;
     const isPositive = amountValue > 0;
-    const amountLabel = `${isPositive ? "+" : ""}${formatCoins(amountValue)} ${
-      Math.abs(amountValue) === 1 ? "coin" : "coins"
-    }`;
+    const amountTextStyle = [
+      styles.orderAmount,
+      isPositive ? styles.amountPositive : styles.amountNegative,
+    ];
 
     const { dateLabel } = formatDateParts(item.createdAt);
 
@@ -182,14 +171,12 @@ const OrderHistory = () => {
 
     return (
       <View style={styles.orderCard}>
-        <Text
-          style={[
-            styles.orderAmount,
-            isPositive ? styles.amountPositive : styles.amountNegative,
-          ]}
-        >
-          {amountLabel}
-        </Text>
+        <CreditAmount
+          value={amountValue}
+          showPlus
+          textStyle={amountTextStyle}
+          iconSize={18}
+        />
         <Text style={styles.orderReason}>{reasonLabel}</Text>
         <Text style={styles.orderTimestamp}>{dateLabel}</Text>
       </View>

src/screens/Profile/Profile.js

@@ -508,7 +508,7 @@ const Profile = () => {
           }}
         >
           {/*{["Chansons", "Playbacks", "Clips"].map((item, index) => (*/}
-          {["Chansons", "Playbacks"].map((item, index) => (
+          {["Chansons", "Playback"].map((item, index) => (
             <Pressable
               key={index}
               onPress={() => onPressMenu(item)}
@@ -540,7 +540,7 @@ const Profile = () => {
             </Pressable>
           ))}
         </View>
-        {selected === "Playbacks" && (
+        {selected === "Playback" && (
           <MusicListSection
             data={displayedPlaybacks}
             emptyText="Aucun playback pour le moment"