last fixes, home and videos
This commit is contained in:
Thomas Demirdjian
@@ -26,14 +26,14 @@ const DownloadPrices = () => {
|
||||
price: "6,99€",
|
||||
},
|
||||
{
|
||||
title: `3 ${action === "playback" ? "Playbacks" : "chansons"}`,
|
||||
title: `3 ${action === "playback" ? "Playback" : "chansons"}`,
|
||||
description: `Ce ${
|
||||
action === "playback" ? "Playback" : "morceau"
|
||||
} et les 2 prochains que tu crées`,
|
||||
price: "12,99€",
|
||||
},
|
||||
{
|
||||
title: `5 ${action === "playback" ? "Playbacks" : "chansons"}`,
|
||||
title: `5 ${action === "playback" ? "Playback" : "chansons"}`,
|
||||
description: `Ce ${
|
||||
action === "playback" ? "Playback" : "morceau"
|
||||
} et les 4 prochains que tu crées`,
|
||||
|
||||
@@ -1,59 +1,101 @@
|
||||
import { View, Text, Image } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import React, { useCallback, useMemo } from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import MusicLandHeader from "../../components/MusicLandHeader";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import { background, img } from "../../assets";
|
||||
import { goBack, navigate } from "../../navigation/NavigationService";
|
||||
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import Style, { size } from "../../styles/Style";
|
||||
import { size } from "../../styles/Style";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { Routes } from "../../navigation";
|
||||
import { useRoute } from "@react-navigation/native";
|
||||
import { useUser } from "../../providers/UserDataProvider";
|
||||
|
||||
const STREAM_PRICES = [
|
||||
{
|
||||
title: "Je diffuse ma chanson",
|
||||
description: "Ce morceau uniquement",
|
||||
price: "1,99€ / mois",
|
||||
},
|
||||
{
|
||||
title: "Je diffuse 3 chansons",
|
||||
description: "Ce morceau et les 2 prochains que tu crées",
|
||||
price: "3,99€ / mois",
|
||||
},
|
||||
{
|
||||
title: "Illimité",
|
||||
price: "14,99€ / mois",
|
||||
recommended: true,
|
||||
},
|
||||
];
|
||||
const ACTIVE_SUBSCRIPTION_STATUSES = new Set([
|
||||
"trialing",
|
||||
"active",
|
||||
"past_due",
|
||||
"unpaid",
|
||||
]);
|
||||
|
||||
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 pickStatus = (value) => {
|
||||
if (typeof value !== "string") {
|
||||
return null;
|
||||
}
|
||||
const trimmed = value.trim();
|
||||
return trimmed ? trimmed.toLowerCase() : null;
|
||||
};
|
||||
|
||||
const hasActiveSubscription = (userData) => {
|
||||
if (!userData) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const statusCandidates = [
|
||||
pickStatus(userData?.stripeSubscriptionStatus),
|
||||
pickStatus(userData?.stripeSubscription?.status),
|
||||
pickStatus(userData?.stripeSubscription?.stripeSubscriptionStatus),
|
||||
pickStatus(userData?.stripeSubscription?.metadata?.status),
|
||||
].filter(Boolean);
|
||||
|
||||
if (
|
||||
statusCandidates.some((status) =>
|
||||
ACTIVE_SUBSCRIPTION_STATUSES.has(status),
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const premiumUntil = userData?.premiumUntil;
|
||||
if (premiumUntil) {
|
||||
const asDate =
|
||||
premiumUntil?.toDate?.() ||
|
||||
(premiumUntil?.seconds ? new Date(premiumUntil.seconds * 1000) : null);
|
||||
|
||||
if (asDate && asDate > new Date()) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (userData?.premium?.active) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const StreamSong = () => {
|
||||
const params = useRoute().params;
|
||||
const action = params?.action;
|
||||
const [selectedIndex, setSelectedIndex] = useState(null);
|
||||
|
||||
const DATA = action === "playback" ? PLAYBACK_STREAM_PRICES : STREAM_PRICES;
|
||||
const { currentUserData = null } = useUser() || {};
|
||||
const isPlaybackFlow = action === "playback";
|
||||
const userHasActiveSubscription = useMemo(
|
||||
() => hasActiveSubscription(currentUserData),
|
||||
[currentUserData],
|
||||
);
|
||||
const headingText = isPlaybackFlow
|
||||
? "Publier ton playback"
|
||||
: "Publier ta chanson";
|
||||
const descriptionText = userHasActiveSubscription
|
||||
? `Ton abonnement est actif, tu peux publier ${
|
||||
isPlaybackFlow ? "ce playback" : "cette chanson"
|
||||
} sur MusicLand et participer au concours.`
|
||||
: `Pour publier ${isPlaybackFlow ? "ton playback" : "ta chanson"} sur la plateforme, tu dois rejoindre le Club MusicLand.`;
|
||||
const ctaLabel = userHasActiveSubscription
|
||||
? isPlaybackFlow
|
||||
? "Publier mon playback"
|
||||
: "Publier ma chanson"
|
||||
: "Rejoindre le Club MusicLand";
|
||||
const handlePrimaryAction = useCallback(() => {
|
||||
if (userHasActiveSubscription) {
|
||||
navigate(Routes.SongRelease, { action });
|
||||
return;
|
||||
}
|
||||
navigate(Routes.Payments);
|
||||
}, [action, userHasActiveSubscription]);
|
||||
|
||||
return (
|
||||
<Page
|
||||
@@ -90,8 +132,7 @@ const StreamSong = () => {
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Diffuser ta chanson{"\n"}
|
||||
Tarifs
|
||||
{headingText}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
@@ -101,91 +142,36 @@ const StreamSong = () => {
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Si tu désires diffuser ta chanson ou tes chansons sur la
|
||||
plateforme de MusicLand et participer au concours et être dans
|
||||
le top 3 voici le tarif.
|
||||
{descriptionText}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ gap: 10 }}>
|
||||
{DATA.map((item, index) => (
|
||||
<CreateLyricsHeader
|
||||
key={index}
|
||||
colors={
|
||||
selectedIndex === index
|
||||
? ["#F94697", "#7023F7"]
|
||||
: [Palette.tran, Palette.tran]
|
||||
}
|
||||
tint={!item.recommended ? "dark" : "light"}
|
||||
onPress={() => {
|
||||
setSelectedIndex(index);
|
||||
navigate(Routes.SongRelease, {
|
||||
action,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<View style={{ paddingTop: 5 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueBold,
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
{item.description && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={{ alignSelf: "flex-end", marginTop: 5 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{item.price}
|
||||
</Text>
|
||||
</View>
|
||||
{item.recommended && (
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 10,
|
||||
height: 26,
|
||||
...Style.containerCenter,
|
||||
borderRadius: 100,
|
||||
position: "absolute",
|
||||
backgroundColor: "#FFFFFF33",
|
||||
bottom: 8,
|
||||
left: 10,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
bottom: -1,
|
||||
}}
|
||||
>
|
||||
Recommandé
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</CreateLyricsHeader>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</CreateLyricsHeader>
|
||||
<View style={{ marginTop: 24, gap: 12 }}>
|
||||
<GradientButton
|
||||
title={ctaLabel}
|
||||
onPress={handlePrimaryAction}
|
||||
containerStyle={{
|
||||
width: "100%",
|
||||
maxWidth: 320,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
{!userHasActiveSubscription && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
textAlign: "center",
|
||||
opacity: 0.8,
|
||||
}}
|
||||
>
|
||||
Rejoins le club pour débloquer la publication de tes créations et
|
||||
tenter de grimper dans le classement.
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user