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

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<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>
@@ -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" />

apps/studio/src/pages/home/releases/Releases.tsx

@@ -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 }
@@ -46,6 +58,8 @@ const Releases: FunctionComponent = () => {
               element={
                 webStudioDisableDistributionAndSales ? (
                   <Navigate to="/home/releases" replace />
+                ) : shouldBlockReleaseCreation ? (
+                  <Navigate to="/home/releases" replace />
                 ) : (
                   <ReleaseDetails />
                 )
@@ -58,6 +72,8 @@ const Releases: FunctionComponent = () => {
               element={
                 webStudioDisableDistributionAndSales ? (
                   <Navigate to="/home/releases" replace />
+                ) : shouldBlockReleaseCreation ? (
+                  <Navigate to="/home/releases" replace />
                 ) : (
                   <NewTrack />
                 )

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<BasicTrackDetailsProps> = ({
   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<BasicTrackDetailsProps> = ({
     initialValues,
   } = useFormikContext<TrackFormValues>();
 
-  // 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<Owner>) => {
@@ -137,13 +107,6 @@ const BasicTrackDetails: FunctionComponent<BasicTrackDetailsProps> = ({
 
   return (
     <Stack>
-      { !isArtistPricePlanSelected && (
-        <DistributionPricingDialog
-          open={ isPricingPlansOpen }
-          onCancel={ handlePricingPlanCancel }
-          onConfirm={ handlePricingPlanConfirm }
-        />
-      ) }
       <Stack direction="column" spacing={ 3 }>
         <Stack
           sx={ {

apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx

@@ -443,7 +443,9 @@ const BasicSongDetails: FunctionComponent<BasicSongDetailsProps> = ({
                   title="DISTRIBUTE & MINT SONG"
                   toggleTooltipText={ tooltipContent }
                   onClick={ () => {
-                    if (!isArtistPricePlanSelected) handlePricingPlanOpen();
+                    if (!isArtistPricePlanSelected) {
+                      handlePricingPlanOpen();
+                    }
                   } }
                 />