Skip to content

[Feature][STUD-580]: Gate 'DistributionPricingDialog' when user first interact with the release CTA 'Create New Release' #981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ITurres wants to merge 1 commit into
base: master
Choose a base branch
from
+74 −7
Open

[Feature][STUD-580]: Gate 'DistributionPricingDialog' when user first interact with the release CTA 'Create New Release' #981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 43 additions & 2 deletions apps/studio/src/pages/home/releases/Discography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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<HTMLAnchorElement>
) => {
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 && (
<DistributionPricingDialog
open={ isPricingDialogOpen }
onCancel={ handlePricingDialogCancel }
onConfirm={ handlePricingDialogConfirm }
/>
) }

<Typography sx={ { pb: 4 } } variant="h3">
RELEASES
</Typography>
Expand Down Expand Up @@ -66,6 +106,7 @@ const Discography: FunctionComponent = () => {
? "/home/releases/new"
: "/home/upload-song"
}
onClick={ handleCreateReleaseClick }
>
<GradientDashedOutline sx={ { padding: 3 } }>
<IconMessage icon={ <AddSong /> } message="Create New Release" />
Expand Down
16 changes: 16 additions & 0 deletions apps/studio/src/pages/home/releases/Releases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,25 @@ 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.
// TODO(webStudioDisableDistributionAndSales): Remove once flag is retired.
const { webStudioAlbumPhaseTwo, webStudioDisableDistributionAndSales } =
useFlags();

const {
data: {
dspPlanSubscribed: isArtistPricePlanSelected = false,
} = emptyProfile,
} = useGetProfileQuery();

const shouldBlockReleaseCreation =
webStudioAlbumPhaseTwo &&
!webStudioDisableDistributionAndSales &&
!isArtistPricePlanSelected;

return (
<Container
maxWidth={ false }
Expand All @@ -46,6 +58,8 @@ const Releases: FunctionComponent = () => {
element={
webStudioDisableDistributionAndSales ? (
<Navigate to="/home/releases" replace />
) : shouldBlockReleaseCreation ? (
<Navigate to="/home/releases" replace />
) : (
<ReleaseDetails />
)
Expand All @@ -58,6 +72,8 @@ const Releases: FunctionComponent = () => {
element={
webStudioDisableDistributionAndSales ? (
<Navigate to="/home/releases" replace />
) : shouldBlockReleaseCreation ? (
<Navigate to="/home/releases" replace />
) : (
<NewTrack />
)
Expand Down
8 changes: 6 additions & 2 deletions apps/studio/src/pages/home/releases/release/tracks/BasicTrackDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,11 @@ const BasicTrackDetails: FunctionComponent<BasicTrackDetailsProps> = ({
dspPlanSubscribed: isArtistPricePlanSelected = false,
} = emptyProfile,
} = useGetProfileQuery();
const { webStudioDisableTrackDistributionAndMinting } = useFlags();
const {
webStudioAlbumPhaseTwo,
webStudioDisableTrackDistributionAndMinting,
} = useFlags();

const { data: genres = [] } = useGetGenresQuery();
const { data: moodOptions = [] } = useGetMoodsQuery();
const { data: languages = [] } = useGetLanguagesQuery();
Expand Down Expand Up @@ -137,7 +141,7 @@ const BasicTrackDetails: FunctionComponent<BasicTrackDetailsProps> = ({

return (
<Stack>
{ !isArtistPricePlanSelected && (
{ !webStudioAlbumPhaseTwo && !isArtistPricePlanSelected && (
Copy link
Contributor

@dmkirshon dmkirshon Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as in BasicSongDetails.tsx. Is this flag necessary as this is a phase two component. Phase two won't even need this in the flow.

At the same time all references to DistributionPricingDialog can be removed as this component is ued in the new/track/new route that doesn't have a mint toggle anyway. There is no reference to handlePricingPlanOpen in this file anyway. All the handle, Pricing dialog, and profile query code can be removed.

<DistributionPricingDialog
open={ isPricingPlansOpen }
onCancel={ handlePricingPlanCancel }
Expand Down
12 changes: 9 additions & 3 deletions apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,14 @@ const BasicSongDetails: FunctionComponent<BasicSongDetailsProps> = ({
const songDetailsRef = useRef<HTMLDivElement>(null);

const {
// webStudioAlbumPhaseTwo,
webStudioDisableTrackDistributionAndMinting,
webStudioDisableDistributionAndSales,
// webStudioDisableDistributionAndSales,
} = useFlags();

const webStudioDisableDistributionAndSales = false;
const webStudioAlbumPhaseTwo = false;
Comment on lines +94 to +95
Copy link
Contributor

@dmkirshon dmkirshon Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the const here? Left over from testing? Same with the commented out flags above.


const isDistributionDisabled =
webStudioDisableDistributionAndSales ||
webStudioDisableTrackDistributionAndMinting;
Expand Down Expand Up @@ -210,7 +214,7 @@ const BasicSongDetails: FunctionComponent<BasicSongDetailsProps> = ({

return (
<Stack>
{ !isArtistPricePlanSelected && (
{ !webStudioAlbumPhaseTwo && !isArtistPricePlanSelected && (
Copy link
Contributor

@dmkirshon dmkirshon Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this flag is necessary. If phase two is enabled BasicSongDetails.tsx won't even be accessible since the Upload A Song path will no longer be available through the routing changes and flags. Users will go through the new release flow instead.

I was going to advise to put the flag under the old edit flow as well, but this will all be migrated to a different UX when phase two launches anyway.

<DistributionPricingDialog
open={ isPricingPlansOpen }
onCancel={ handlePricingPlanCancel }
Expand Down Expand Up @@ -443,7 +447,9 @@ const BasicSongDetails: FunctionComponent<BasicSongDetailsProps> = ({
title="DISTRIBUTE & MINT SONG"
toggleTooltipText={ tooltipContent }
onClick={ () => {
if (!isArtistPricePlanSelected) handlePricingPlanOpen();
if (!webStudioAlbumPhaseTwo && !isArtistPricePlanSelected) {
handlePricingPlanOpen();
}
} }
/>

Expand Down
Loading