diff --git a/apps/studio/src/pages/home/releases/Discography.tsx b/apps/studio/src/pages/home/releases/Discography.tsx index 8228c9a8..9455219e 100644 --- a/apps/studio/src/pages/home/releases/Discography.tsx +++ b/apps/studio/src/pages/home/releases/Discography.tsx @@ -1,4 +1,5 @@ -import { FunctionComponent, useState } from "react"; +import { FunctionComponent, useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; import { Box, Typography } from "@mui/material"; @@ -14,27 +15,66 @@ import { AddSong } from "@newm-web/assets"; import SongList from "./SongList"; import OfficialStatementCTA from "../../../components/OfficialStatementCTA"; -import { SearchBox } from "../../../components"; +import { DistributionPricingDialog, SearchBox } from "../../../components"; +import { emptyProfile, useGetProfileQuery } from "../../../modules/session"; import { useGetSongCountQuery } from "../../../modules/song"; const Discography: FunctionComponent = () => { + const navigate = useNavigate(); // TODO(webStudioAlbumPhaseTwo): Remove flag once flag is retired. const { webStudioAlbumPhaseTwo, webStudioDisableDistributionAndSales } = useFlags(); + const { + data: { + dspPlanSubscribed: isArtistPricePlanSelected = false, + } = emptyProfile, + } = useGetProfileQuery(); + const [query, setQuery] = useState(""); + const [isPricingDialogOpen, setIsPricingDialogOpen] = useState(false); const { data: { count: totalCountOfSongs = 0 } = {} } = useGetSongCountQuery({ ownerIds: ["me"], phrase: query, }); + const shouldGatePricingDialog = useMemo(() => { + return webStudioAlbumPhaseTwo && !isArtistPricePlanSelected; + }, [isArtistPricePlanSelected, webStudioAlbumPhaseTwo]); + const handleSearch = (searched: string) => { setQuery(searched); }; + const handleCreateReleaseClick = ( + event: React.MouseEvent + ) => { + if (!webStudioAlbumPhaseTwo) return; + if (!shouldGatePricingDialog) return; + event.preventDefault(); + setIsPricingDialogOpen(true); + }; + + const handlePricingDialogCancel = () => { + setIsPricingDialogOpen(false); + }; + + const handlePricingDialogConfirm = () => { + setIsPricingDialogOpen(false); + navigate("/home/releases/new"); + }; + return ( <> + { webStudioAlbumPhaseTwo && !isArtistPricePlanSelected && ( + + ) } + RELEASES @@ -66,6 +106,7 @@ const Discography: FunctionComponent = () => { ? "/home/releases/new" : "/home/upload-song" } + onClick={ handleCreateReleaseClick } > } message="Create New Release" /> diff --git a/apps/studio/src/pages/home/releases/Releases.tsx b/apps/studio/src/pages/home/releases/Releases.tsx index a9143d66..d94f547a 100644 --- a/apps/studio/src/pages/home/releases/Releases.tsx +++ b/apps/studio/src/pages/home/releases/Releases.tsx @@ -13,6 +13,7 @@ import TrackDetailsRouter from "./release/tracks/TrackDetailsRouter"; import Distribute from "./release/distribute/Distribute"; import NewTrack from "./release/tracks/NewTrack"; import NotFoundPage from "../../NotFoundPage"; +import { emptyProfile, useGetProfileQuery } from "../../../modules/session"; const Releases: FunctionComponent = () => { // TODO(webStudioAlbumPhaseTwo): Remove flag once flag is retired. @@ -20,6 +21,17 @@ const Releases: FunctionComponent = () => { const { webStudioAlbumPhaseTwo, webStudioDisableDistributionAndSales } = useFlags(); + const { + data: { + dspPlanSubscribed: isArtistPricePlanSelected = false, + } = emptyProfile, + } = useGetProfileQuery(); + + const shouldBlockReleaseCreation = + webStudioAlbumPhaseTwo && + !webStudioDisableDistributionAndSales && + !isArtistPricePlanSelected; + return ( { element={ webStudioDisableDistributionAndSales ? ( + ) : shouldBlockReleaseCreation ? ( + ) : ( ) @@ -58,6 +72,8 @@ const Releases: FunctionComponent = () => { element={ webStudioDisableDistributionAndSales ? ( + ) : shouldBlockReleaseCreation ? ( + ) : ( ) diff --git a/apps/studio/src/pages/home/releases/release/tracks/BasicTrackDetails.tsx b/apps/studio/src/pages/home/releases/release/tracks/BasicTrackDetails.tsx index aadc9469..e546c5d8 100644 --- a/apps/studio/src/pages/home/releases/release/tracks/BasicTrackDetails.tsx +++ b/apps/studio/src/pages/home/releases/release/tracks/BasicTrackDetails.tsx @@ -1,9 +1,7 @@ -import { FunctionComponent, useEffect, useRef, useState } from "react"; +import { FunctionComponent, useEffect, useRef } from "react"; import { useFormikContext } from "formik"; -import { useFlags } from "launchdarkly-react-client-sdk"; - import { Box, Link, Stack, Typography, useTheme } from "@mui/material"; import { @@ -24,17 +22,13 @@ import { NEWM_STUDIO_FAQ_URL, SONG_DESCRIPTION_MAX_CHARACTER_COUNT, } from "../../../../../common"; -import { DistributionPricingDialog, PlaySong } from "../../../../../components"; +import { PlaySong } from "../../../../../components"; import SelectCoCreators from "../../../../../components/minting/SelectCoCreators"; import { useGetGenresQuery, useGetLanguagesQuery, useGetMoodsQuery, } from "../../../../../modules/content"; -import { - emptyProfile, - useGetProfileQuery, -} from "../../../../../modules/session"; import { Creditor, Featured, Owner } from "../../../../../modules/song"; interface BasicTrackDetailsProps { @@ -49,12 +43,6 @@ const BasicTrackDetails: FunctionComponent = ({ trackId = "", }) => { const theme = useTheme(); - const { - data: { - dspPlanSubscribed: isArtistPricePlanSelected = false, - } = emptyProfile, - } = useGetProfileQuery(); - const { webStudioDisableTrackDistributionAndMinting } = useFlags(); const { data: genres = [] } = useGetGenresQuery(); const { data: moodOptions = [] } = useGetMoodsQuery(); const { data: languages = [] } = useGetLanguagesQuery(); @@ -76,24 +64,6 @@ const BasicTrackDetails: FunctionComponent = ({ initialValues, } = useFormikContext(); - // DSP pricing plan mint song toggling - const [isPricingPlansOpen, setIsPricingPlansOpen] = useState(false); - const handlePricingPlanCancel = () => { - setIsPricingPlansOpen(false); - setFieldValue("isMinting", false); - }; - const handlePricingPlanConfirm = () => { - setIsPricingPlansOpen(false); - setFieldValue("isMinting", true); - }; - - // Monitor feature flag changes, particularly seen for pricing plan acceptance - useEffect(() => { - if (webStudioDisableTrackDistributionAndMinting) { - setFieldValue("isMinting", false); - } - }, [webStudioDisableTrackDistributionAndMinting, setFieldValue]); - const hasCoverArtChanged = values.coverArtUrl !== initialValues.coverArtUrl; const handleChangeOwners = (owners: ReadonlyArray) => { @@ -137,13 +107,6 @@ const BasicTrackDetails: FunctionComponent = ({ return ( - { !isArtistPricePlanSelected && ( - - ) } = ({ title="DISTRIBUTE & MINT SONG" toggleTooltipText={ tooltipContent } onClick={ () => { - if (!isArtistPricePlanSelected) handlePricingPlanOpen(); + if (!isArtistPricePlanSelected) { + handlePricingPlanOpen(); + } } } />