minors fixes

2025-12-09 09:47:26 +01:00
parent 9c2087c574
commit 3f799af419
8 changed files with 155 additions and 164 deletions
@@ -6,7 +6,8 @@
      "firebase-debug.log",
      "firebase-debug.*.log"
    ],
-    "predeploy": []
+    "predeploy": [],
+    "source": "functions"
  },
  "emulators": {
    "functions": {
@@ -7358,30 +7358,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/winston": {
-      "version": "3.18.3",
-      "resolved": "https://registry.npmjs.org/winston/-/winston-3.18.3.tgz",
-      "integrity": "sha512-NoBZauFNNWENgsnC9YpgyYwOVrl2m58PpQ8lNHjV3kosGs7KJ7Npk9pCUE+WJlawVSe8mykWDKWFSVfs3QO9ww==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@colors/colors": "^1.6.0",
-        "@dabh/diagnostics": "^2.0.8",
-        "async": "^3.2.3",
-        "is-stream": "^2.0.0",
-        "logform": "^2.7.0",
-        "one-time": "^1.0.0",
-        "readable-stream": "^3.4.0",
-        "safe-stable-stringify": "^2.3.1",
-        "stack-trace": "0.0.x",
-        "triple-beam": "^1.3.0",
-        "winston-transport": "^4.9.0"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      }
-    },
    "node_modules/winston-transport": {
      "version": "4.9.0",
      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.9.0.tgz",
@@ -7397,13 +7373,6 @@
        "node": ">= 12.0.0"
      }
    },
-    "node_modules/winston/node_modules/async": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
-      "license": "MIT",
-      "optional": true
-    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -50,12 +50,12 @@ if (!firebase?.apps?.filter(({ name_ }) => name_ === "[DEFAULT]").length) {
    persistence: getReactNativePersistence(AsyncStorage),
  });

-  if (__DEV__) {
-    firebase.functions().useEmulator("localhost", 5001);
-  }
+  // if (__DEV__) {
+  //   firebase.functions().useEmulator("localhost", 5001);
+  // configureFunctionsEmulator(defaultFunctions, "us-central1");
+  // }
  const defaultFunctions = firebase.functions();
  functionsInstances["us-central1"] = defaultFunctions;
-  configureFunctionsEmulator(defaultFunctions, "us-central1");
  console.log("Firebase init");
 }

@@ -60,10 +60,10 @@ const HitParade = () => {
    [topSongs]
  );

-  const [playbacksCol1, playbacksCol2] = useMemo(() => {
-    const arr = Array.isArray(topPlaybacks) ? topPlaybacks : [];
-    return [arr.slice(0, 5), arr.slice(5)];
-  }, [topPlaybacks]);
+  const playbackList = useMemo(
+    () => (Array.isArray(topPlaybacks) ? topPlaybacks : []),
+    [topPlaybacks]
+  );

  const resolvePlaybackThumbnail = useCallback((project) => {
    const candidates = [
@@ -110,7 +110,7 @@ const HitParade = () => {
        gap: 10,
        paddingBottom: responsiveHeight(20),
      }}
-      data={Array.isArray(topPlaybacks) ? topPlaybacks : []}
+      data={playbackList}
      keyExtractor={(item) => item.id}
      renderItem={({ item, index }) => (
        <PlaybacksCard
@@ -146,9 +146,8 @@ const HitParade = () => {
  );

  const renderPlaybackColumns = () => (
-    <View style={{ flexDirection: "row", gap: 10, alignItems: "flex-start" }}>
-      <View style={{ flex: 1, gap: 10 }}>
-        {playbacksCol1.map((item, idx) => (
+    <View style={{ gap: 10 }}>
+      {playbackList.map((item, idx) => (
        <PlaybacksCard
          key={item.id}
          rank={idx + 1}
@@ -159,22 +158,6 @@ const HitParade = () => {
        />
      ))}
    </View>
-
-      {playbacksCol2.length > 0 && (
-        <View style={{ flex: 1, gap: 10 }}>
-          {playbacksCol2.map((item, idx) => (
-            <PlaybacksCard
-              key={item.id}
-              rank={5 + idx + 1}
-              title={item?.title || "Sans titre"}
-              artist={item?.userName}
-              thumbnailUrl={resolvePlaybackThumbnail(item)}
-              onPress={() => navigate(Routes.Playbacks, { projectId: item.id })}
-            />
-          ))}
-        </View>
-      )}
-    </View>
  );

  const isWeb = Platform.OS === "web";
@@ -12,11 +12,10 @@ import {
 import { background, icons } from "../assets";
 import FullscreenIntroVideo from "../components/FullscreenIntroVideo";
 import GradientButton from "../components/GradientButton";
-import { LinearGradient } from "../components/LinearGradient/LinearGradient";
 import { videosRef } from "../config/firebase";
 import useDataFromRef from "../hooks/useDataFromRef";
 import Page from "../layouts/Page";
-import { Routes } from "../navigation/Routes";
+import { Routes } from "../navigation";
 import { useUser } from "../providers/UserDataProvider";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
@@ -154,7 +153,9 @@ export default function LandingPage() {
                  title="Présentation de Musicland"
                  onPress={() =>
                    setVideoUrl(
-                      Platform.OS === "web" ? video?.landingWeb : video?.landing
+                      Platform.OS === "web"
+                        ? video?.landingWeb
+                        : video?.landing,
                    )
                  }
                  containerStyle={styles.actionButton}
@@ -14,6 +14,7 @@ import { background } from "../../assets";
 import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
+import AppCheckbox from "../../components/AppCheckbox";
 import firebase, {
  projectsRef,
  serverTimestamp,
@@ -143,6 +144,7 @@ const PlaybackDownload = ({ route }) => {
    project?.playbackUrl || null,
  );
  const [isPublishing, setIsPublishing] = useState(false);
+  const [hasAcceptedPublication, setHasAcceptedPublication] = useState(true);
  const hasShownAfterPlaybackRef = useRef(false);

  const { data: video } = useDataFromRef({
@@ -284,6 +286,13 @@ const PlaybackDownload = ({ route }) => {

  const handlePublish = async () => {
    if (isPublishing) return;
+    if (!hasAcceptedPublication) {
+      setTooltip({
+        type: "error",
+        text: "Confirme la diffusion sur Musicland et YouTube avant de publier",
+      });
+      return;
+    }
    if (!project?.id) {
      if (action === "playback") {
        setTooltip({
@@ -429,6 +438,19 @@ const PlaybackDownload = ({ route }) => {

          <ClubAdvantagesCard style={styles.clubCardSpacing} />

+          <View style={styles.publishConsentContainer}>
+            <AppCheckbox
+              selected={hasAcceptedPublication}
+              onPress={() =>
+                setHasAcceptedPublication((prevState) => !prevState)
+              }
+              label="J'accepte la diffusion de mon playback sur Musicland et YouTube."
+            />
+            <Text style={styles.publishConsentDescription}>
+              Cette confirmation est requise avant de lancer la publication.
+            </Text>
+          </View>
+
          <BorderGradientButton
            title={continueLabel}
            onPress={() => {
@@ -438,6 +460,7 @@ const PlaybackDownload = ({ route }) => {
                setShowConfirmModal(true);
              }
            }}
+            disabled={isPublishing || !hasAcceptedPublication}
            containerStyle={styles.continueButton}
          />
        </ScrollView>
@@ -491,6 +514,16 @@ const styles = StyleSheet.create({
  clubCardSpacing: {
    marginTop: 10,
  },
+  publishConsentContainer: {
+    gap: 6,
+    marginTop: 2,
+  },
+  publishConsentDescription: {
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 13,
+    color: Palette.white,
+    opacity: 0.8,
+  },
  continueButton: {
    marginTop: 10,
  },
@@ -1,8 +1,9 @@
 import { useRoute } from "@react-navigation/native";
 import React, { useCallback, useMemo, useState } from "react";
-import { Linking, Text, View } from "react-native";
+import { Linking, StyleSheet, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background } from "../../assets";
+import AppCheckbox from "../../components/AppCheckbox";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
@@ -37,6 +38,7 @@ const PublishYoutube = () => {
  const projectId = project?.id || routeProjectId || null;

  const [saving, setSaving] = useState(false);
+  const [hasAcceptedPublication, setHasAcceptedPublication] = useState(true);
  const youtubeUrl = project?.youtubeUrl ?? null;
  const youtubeStatus = project?.youtubeStatus ?? null;
  const youtubeError = project?.youtubeError ?? null;
@@ -50,7 +52,11 @@ const PublishYoutube = () => {
    [youtubeStatus]
  );
  const publishDisabled =
-    saving || isPublishing || !playbackReady || !projectId;
+    saving ||
+    isPublishing ||
+    !playbackReady ||
+    !projectId ||
+    !hasAcceptedPublication;
  const publishButtonLabel = isPublishing
    ? "Publication en cours..."
    : hasYoutubePublication
@@ -128,6 +134,13 @@ const PublishYoutube = () => {
  }, [playbackReady, projectId, setTooltip]);

  const handleConfirmPublish = useCallback(() => {
+    if (!hasAcceptedPublication) {
+      setTooltip?.({
+        type: "error",
+        text: "Confirme la diffusion sur Musicland et YouTube avant de publier",
+      });
+      return;
+    }
    if (publishDisabled) {
      return;
    }
@@ -144,7 +157,13 @@ const PublishYoutube = () => {
        onPress: handleMarkPublished,
      },
    ]);
-  }, [handleMarkPublished, hasYoutubePublication, publishDisabled]);
+  }, [
+    handleMarkPublished,
+    hasAcceptedPublication,
+    hasYoutubePublication,
+    publishDisabled,
+    setTooltip,
+  ]);

  const handleResetPublication = useCallback(async () => {
    if (!projectId) {
@@ -246,6 +265,18 @@ const PublishYoutube = () => {
          )}
        </View>
        <View style={{ gap: 14 }}>
+          <View style={styles.consentContainer}>
+            <AppCheckbox
+              selected={hasAcceptedPublication}
+              onPress={() =>
+                setHasAcceptedPublication((prevState) => !prevState)
+              }
+              label="J'accepte la diffusion de mon contenu sur Musicland et YouTube."
+            />
+            <Text style={styles.consentDescription}>
+              Cette confirmation est requise avant toute mise en ligne.
+            </Text>
+          </View>
          <GradientButton
            title={publishButtonLabel}
            onPress={handleConfirmPublish}
@@ -272,4 +303,16 @@ const PublishYoutube = () => {
  );
 };

+const styles = StyleSheet.create({
+  consentContainer: {
+    gap: 6,
+  },
+  consentDescription: {
+    fontSize: 13,
+    fontFamily: FONT_FAMILY.InterRegular,
+    color: Palette.white,
+    opacity: 0.8,
+  },
+});
+
 export default PublishYoutube;
@@ -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}>
+              {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%",