update

src/screens/Production/StreamSong.js

@@ -10,6 +10,7 @@ import Style, { size } from "../../styles/Style";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { Routes } from "../../navigation";
+import { useRoute } from "@react-navigation/core";
 
 const STREAM_PRICES = [
   {
@@ -29,11 +30,40 @@ const STREAM_PRICES = [
   },
 ];
 
+const PLAYBACK_STREAM_PRICES = [
+  {
+    title: "Je créer et diffuse mon Playback",
+    description: "Ce morceau uniquement",
+    price: "6,99€ / mois",
+  },
+  {
+    title: "3 Playbacks",
+    description: "Ce morceau et les 2 prochains que tu crées",
+    price: "12,99€ / mois",
+  },
+  {
+    title: "Illimité",
+    price: "20€ / mois",
+    recommended: true,
+  },
+];
+
 const StreamSong = () => {
+  const params = useRoute().params;
+  const action = params?.action;
   const [selectedIndex, setSelectedIndex] = useState(null);
 
+  const DATA = action === "playback" ? PLAYBACK_STREAM_PRICES : STREAM_PRICES;
+
   return (
-    <Page backgroundImg={background.productionBG2} headerType="NONE">
+    <Page
+      backgroundImg={
+        action === "playback"
+          ? background.playbackBG2
+          : background.productionBG2
+      }
+      headerType="NONE"
+    >
       <MusicLandHeader onPressBack={goBack} progress={75} />
       <View style={{ flex: 1, paddingTop: responsiveHeight(5) }}>
         <CreateLyricsHeader
@@ -77,7 +107,7 @@ const StreamSong = () => {
               </Text>
             </View>
             <View style={{ gap: 10 }}>
-              {STREAM_PRICES.map((item, index) => (
+              {DATA.map((item, index) => (
                 <CreateLyricsHeader
                   key={index}
                   colors={
@@ -88,7 +118,9 @@ const StreamSong = () => {
                   tint={!item.recommended ? "dark" : "light"}
                   onPress={() => {
                     setSelectedIndex(index);
-                    navigate(Routes.SongRelease);
+                    navigate(Routes.SongRelease, {
+                      action,
+                    });
                   }}
                 >
                   <View style={{ paddingTop: 5 }}>