minors fixes

2025-12-09 09:47:26 +01:00
parent 9c2087c574
commit 3f799af419
8 changed files with 155 additions and 164 deletions
@@ -70,9 +70,13 @@ const getIntervalLabel = (recurring) => {
 };

 function SubscriptionCard({ plan, selected, onSelect }) {
+  const planKey = getPlanKeyForBadge(plan);
  const planName =
-    plan?.product?.name || plan?.nickname || plan?.priceId || "Abonnement";
-  const planDescription = plan?.product?.description || "";
+    (planKey && PLAN_DISPLAY_NAME_BY_KEY[planKey]) ||
+    plan?.product?.name ||
+    plan?.nickname ||
+    plan?.priceId ||
+    "Abonnement";
  const formattedPrice = formatCurrency(plan?.unitAmount, plan?.currency);
  const intervalLabel = getIntervalLabel(plan?.recurring);
  const coinsPerMonth =
@@ -80,21 +84,10 @@ function SubscriptionCard({ plan, selected, onSelect }) {
    Number.isFinite(plan.coinsPerMonth)
      ? Math.round(plan.coinsPerMonth)
      : null;
-  const songsPerMonth =
-    coinsPerMonth !== null
-      ? Math.floor(coinsPerMonth / CREDITS_PER_MUSIC)
-      : null;
-  const songsPerMonthLabel =
-    songsPerMonth === null
-      ? null
-      : songsPerMonth >= 1
-      ? `≈ ${songsPerMonth} ${
-          songsPerMonth > 1 ? "musiques" : "musique"
-        } / mois`
-      : "Moins d'une musique / mois";
-  const planBadgeKey = getPlanKeyForBadge(plan);
+  const planBadgeKey = planKey;
  const planBadgeSource =
    planBadgeKey && subBadges[planBadgeKey] ? subBadges[planBadgeKey] : null;
+  const planFeatures = SUBSCRIPTION_FEATURES;
  const handleSelect = React.useCallback(() => {
    if (typeof onSelect === "function" && plan?.priceId) {
      onSelect(plan.priceId);
@@ -138,14 +131,16 @@ function SubscriptionCard({ plan, selected, onSelect }) {
            ) : null}
          </View>

-          {formattedPrice ? (
+          {formattedPrice || coinsPerMonth !== null ? (
            <View style={styles.priceBlock}>
-              <View style={styles.priceRow}>
-                <Text style={styles.priceValue}>{formattedPrice}</Text>
-                {intervalLabel ? (
-                  <Text style={styles.period}>{intervalLabel}</Text>
-                ) : null}
-              </View>
+              {formattedPrice ? (
+                <View style={styles.priceRow}>
+                  <Text style={styles.priceValue}>{formattedPrice}</Text>
+                  {intervalLabel ? (
+                    <Text style={styles.period}>{intervalLabel}</Text>
+                  ) : null}
+                </View>
+              ) : null}
              {coinsPerMonth !== null ? (
                <View style={styles.coinsPerMonthRow}>
                  <CreditAmount
@@ -153,19 +148,22 @@ function SubscriptionCard({ plan, selected, onSelect }) {
                    showPlus
                    textStyle={styles.coinsPerMonth}
                    iconSize={16}
-                    accessibilityLabel={`+${coinsPerMonth} pièces par mois`}
+                    accessibilityLabel={`+${coinsPerMonth} crédits par mois`}
                  />
                  <Text style={styles.coinsPerMonthSuffix}>/ mois</Text>
                </View>
              ) : null}
-              {songsPerMonthLabel ? (
-                <Text style={styles.songsPerMonth}>{songsPerMonthLabel}</Text>
-              ) : null}
            </View>
          ) : null}

-          {planDescription ? (
-            <Text style={styles.description}>{planDescription}</Text>
+          {planFeatures?.length ? (
+            <View style={styles.features}>
+              {planFeatures.map((feature) => (
+                <Text key={feature} style={styles.featureText}>
+                  {feature}
+                </Text>
+              ))}
+            </View>
          ) : null}
        </View>
      </BlurView>
@@ -174,11 +172,6 @@ function SubscriptionCard({ plan, selected, onSelect }) {
 }

 const PRICE_PRIORITY_BY_PERIOD = {
-  monthly: [
-    "price_1SPgitCzf2o5bDRdbnhLFx6f", // Starter
-    "price_1SPgjCCzf2o5bDRdr08Xzp8u", // Pro
-    "price_1SPgjaCzf2o5bDRdd9Xo2u26", // Premium
-  ],
  annual: [
    "price_1SPgkDCzf2o5bDRdNGLVNeQ3", // Starter
    "price_1SPgkXCzf2o5bDRdejBVxEBY", // Pro
@@ -187,16 +180,9 @@ const PRICE_PRIORITY_BY_PERIOD = {
 };

 const PACK_PRICE_ID_BY_PERIOD = {
-  monthly: {
-    starter: "price_1SPgitCzf2o5bDRdbnhLFx6f",
-    pro: "price_1SPgjCCzf2o5bDRdr08Xzp8u",
-    prop: "price_1SPgjCCzf2o5bDRdr08Xzp8u",
-    premium: "price_1SPgjaCzf2o5bDRdd9Xo2u26",
-  },
  annual: {
    starter: "price_1SPgkDCzf2o5bDRdNGLVNeQ3",
    pro: "price_1SPgkXCzf2o5bDRdejBVxEBY",
-    prop: "price_1SPgkXCzf2o5bDRdejBVxEBY",
    premium: "price_1SPgkqCzf2o5bDRdIcUwTDrm",
  },
 };
@@ -208,7 +194,7 @@ Object.values(PACK_PRICE_ID_BY_PERIOD).forEach((mapping) => {
    if (!priceId) {
      return;
    }
-    PRICE_ID_TO_PLAN_KEY[priceId] = planKey === "prop" ? "pro" : planKey;
+    PRICE_ID_TO_PLAN_KEY[priceId] = planKey;
  });
 });

@@ -216,10 +202,22 @@ const PLAN_FALLBACK_ORDER = ["starter", "pro", "premium"];

 const PLAN_SYNONYMS = {
  starter: ["starter"],
-  pro: ["pro", "prop"],
+  pro: ["pro"],
  premium: ["premium"],
 };

+const PLAN_DISPLAY_NAME_BY_KEY = {
+  starter: "Play Backer Blue",
+  pro: "Play Backer Silver",
+  premium: "Play Backer Gold",
+};
+
+const SUBSCRIPTION_FEATURES = [
+  "*Eligible au Hit parade Vidéo",
+  "Privilège Membre : Récompense doublée",
+  "Eligible au hit parade Artiste trimestriel et annuel",
+];
+
 const getPlanKeyForBadge = (plan) => {
  if (!plan || typeof plan !== "object") {
    return null;
@@ -296,7 +294,6 @@ const PAGE_BACKGROUND_COLOR = "#303438";
 const SUBSCRIPTION_DISCLAIMER =
  "Résiliable en un clic à tout moment. Les prix sont indiqués TTC. Contacte-nous pour des besoins spécifiques (facturation annuelle, volume, offres éducation).";
 const CARD_MIN_HEIGHT = isWeb ? 320 : 240;
-const CREDITS_PER_MUSIC = 8;

 export default function Subscriptions() {
  const route = useRoute();
@@ -456,8 +453,6 @@ export default function Subscriptions() {
    );
  }, [combinedErrorMessage]);

-  const renderSegmentedControl = React.useCallback(() => null, []);
-
  const renderMobilePlanItem = React.useCallback(
    ({ item }) => (
      <View style={styles.mobileCard}>
@@ -502,10 +497,9 @@ export default function Subscriptions() {
    return (
      <View style={styles.mobileStickyHeader}>
        {renderHeaderSection()}
-        {renderSegmentedControl()}
      </View>
    );
-  }, [renderHeaderSection, renderSegmentedControl]);
+  }, [renderHeaderSection]);

  const renderMobileBottomActions = React.useCallback(() => {
    return (
@@ -606,8 +600,6 @@ export default function Subscriptions() {
                  </Text>
                ) : null}

-                {renderSegmentedControl()}
-
                <View style={[styles.packs, isWeb && styles.packsWeb]}>
                  {currentPlans.map((plan) => (
                    <SubscriptionCard
@@ -768,32 +760,6 @@ const styles = StyleSheet.create({
    alignItems: "stretch",
    justifyContent: "center",
  },
-  segmentedControl: {
-    flexDirection: "row",
-    alignSelf: "center",
-    justifyContent: "center",
-    padding: 4,
-    borderRadius: 999,
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-    marginTop: isWeb ? 12 : 8,
-    marginBottom: isWeb ? 8 : 4,
-  },
-  segmentButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 18,
-    borderRadius: 999,
-  },
-  segmentButtonActive: {
-    backgroundColor: "rgba(255, 255, 255, 0.18)",
-  },
-  segmentLabel: {
-    fontFamily: FONT_FAMILY.InterMedium,
-    fontSize: 14,
-    color: "rgba(255, 255, 255, 0.7)",
-  },
-  segmentLabelActive: {
-    color: Palette.white,
-  },
  actions: {
    width: "100%",
    alignItems: "center",
@@ -888,10 +854,15 @@ const styles = StyleSheet.create({
    fontSize: 13,
    color: Palette.primary,
  },
-  songsPerMonth: {
-    fontFamily: FONT_FAMILY.InterRegular,
-    fontSize: 12,
-    color: "rgba(255, 255, 255, 0.75)",
+  features: {
+    marginTop: isWeb ? 12 : 8,
+    gap: 6,
+  },
+  featureText: {
+    fontFamily: FONT_FAMILY.InterMedium,
+    fontSize: 13,
+    lineHeight: 18,
+    color: "rgba(255, 255, 255, 0.85)",
  },
  priceValue: {
    fontFamily: FONT_FAMILY.InterBold,
@@ -903,12 +874,6 @@ const styles = StyleSheet.create({
    fontSize: 14,
    color: "rgba(255, 255, 255, 0.7)",
  },
-  description: {
-    fontFamily: FONT_FAMILY.InterRegular,
-    fontSize: 14,
-    lineHeight: 22,
-    color: Palette.white,
-  },
  badge: {
    alignSelf: "flex-start",
    paddingHorizontal: 12,
@@ -939,10 +904,6 @@ const styles = StyleSheet.create({
    backgroundColor: PAGE_BACKGROUND_COLOR,
    alignItems: "center",
  },
-  segmentedControlMobile: {
-    alignSelf: "center",
-    marginBottom: 0,
-  },
  mobileList: {
    flex: 1,
    width: "100%",