diff --git a/apps/studio/src/components/index.ts b/apps/studio/src/components/index.ts index 72e7f7eef..65990efb3 100644 --- a/apps/studio/src/components/index.ts +++ b/apps/studio/src/components/index.ts @@ -1,4 +1,4 @@ -// List exports in alphabetical order by component name +// ! List exports in alphabetical order by component name. export { default as AddProfileInformation } from "./createProfile/AddProfileInformation"; export { default as Background } from "./Background"; @@ -17,6 +17,7 @@ export { default as InvitesModal } from "./invites/InvitesModal"; export { default as LogoutButton } from "./home/LogoutButton"; export { default as MarketplaceTabSkeleton } from "./skeletons/MarketplaceTabSkeleton"; export { default as NEWMLogo } from "./NEWMLogo"; +export { default as OfficialStatementCTA } from "./OfficialStatementCTA"; export { default as Owners } from "./minting/Owners"; export { default as PingEarningsInProgressWrapper } from "./PingEarningsInProgressWrapper"; export { default as PingSaleEnd } from "./sales/PingSaleEnd"; diff --git a/apps/studio/src/pages/home/releases/EditSong.tsx b/apps/studio/src/pages/home/releases/EditSong.tsx index f530e7745..83add45bd 100644 --- a/apps/studio/src/pages/home/releases/EditSong.tsx +++ b/apps/studio/src/pages/home/releases/EditSong.tsx @@ -42,7 +42,10 @@ interface EditSongFormValues extends PatchSongThunkRequest { } const EditSong: FunctionComponent = () => { - const { webStudioDisableTrackDistributionAndMinting } = useFlags(); + const { + webStudioDisableTrackDistributionAndMinting, + webStudioDisableDistributionAndSales, + } = useFlags(); const navigate = useNavigate(); const dispatch = useDispatch(); @@ -177,7 +180,8 @@ const EditSong: FunctionComponent = () => { isMinting: isArtistPricePlanSelected && isSongEditable(mintingStatus) && - !webStudioDisableTrackDistributionAndMinting, + !webStudioDisableTrackDistributionAndMinting && + !webStudioDisableDistributionAndSales, isrc, iswc, language, diff --git a/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx b/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx index 65e9c578d..551e7b4dc 100644 --- a/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx +++ b/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx @@ -1,4 +1,12 @@ +import { FunctionComponent, useEffect, useRef, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; + +import { useFlags } from "launchdarkly-react-client-sdk"; + +import { useFormikContext } from "formik"; + import { Box, Link, Stack, Typography, useTheme } from "@mui/material"; + import { Alert, Button, @@ -11,6 +19,7 @@ import { SwitchInputField, TextAreaField, TextInputField, + Tooltip, UploadImageField, UploadSongField, } from "@newm-web/elements"; @@ -19,19 +28,20 @@ import { useExtractProperty, useWindowDimensions, } from "@newm-web/utils"; -import { useConnectWallet } from "@newm.io/cardano-dapp-wallet-connector"; -import { useFormikContext } from "formik"; -import { FunctionComponent, useEffect, useRef, useState } from "react"; -import { useNavigate, useParams } from "react-router-dom"; import { MintingStatus } from "@newm-web/types"; -import { useFlags } from "launchdarkly-react-client-sdk"; +import { useConnectWallet } from "@newm.io/cardano-dapp-wallet-connector"; + import { UploadSongFormValues } from "./UploadSong"; import { NEWM_STUDIO_FAQ_URL, SONG_DESCRIPTION_MAX_CHARACTER_COUNT, useAppDispatch, } from "../../../common"; -import { DistributionPricingDialog, PlaySong } from "../../../components"; +import { + DistributionPricingDialog, + OfficialStatementCTA, + PlaySong, +} from "../../../components"; import SelectCoCreators from "../../../components/minting/SelectCoCreators"; import { useGetGenresQuery, @@ -75,6 +85,25 @@ const BasicSongDetails: FunctionComponent = ({ const descriptionRef = useRef(null); const songDetailsRef = useRef(null); + const { + webStudioDisableTrackDistributionAndMinting, + webStudioDisableDistributionAndSales, + } = useFlags(); + + const isDistributionDisabled = + webStudioDisableDistributionAndSales || + webStudioDisableTrackDistributionAndMinting; + const shouldUseNewTooltip = webStudioDisableDistributionAndSales; // * New flag takes precedence. + const tooltipContent = shouldUseNewTooltip ? ( + + ) : webStudioDisableTrackDistributionAndMinting ? ( + <> + Track distribution and minting are temporarily disabled, but we're + working on it! You can still upload your tracks and song details to save + for later. Check back in a bit for updates. + + ) : undefined; + const { data: { verificationStatus, @@ -83,7 +112,6 @@ const BasicSongDetails: FunctionComponent = ({ appleMusicProfile, } = emptyProfile, } = useGetProfileQuery(); - const { webStudioDisableTrackDistributionAndMinting } = useFlags(); const { data: genres = [] } = useGetGenresQuery(); const { data: moodOptions = [] } = useGetMoodsQuery(); const { data: languages = [] } = useGetLanguagesQuery(); @@ -134,7 +162,8 @@ const BasicSongDetails: FunctionComponent = ({ const isSubmitDisabled = !values.agreesToCoverArtGuidelines || (isMintingVisible && (!wallet || !isVerified)) || - (values.isMinting && webStudioDisableTrackDistributionAndMinting); + (values.isMinting && isDistributionDisabled) || + isDistributionDisabled; const handleChangeOwners = (owners: ReadonlyArray) => { setFieldValue("owners", owners); @@ -408,19 +437,11 @@ const BasicSongDetails: FunctionComponent = ({ "Distribute your track to all major streaming platforms " + "and generate stream tokens for royalty claiming." } - disabled={ - isDeclined || webStudioDisableTrackDistributionAndMinting - } + disabled={ isDeclined || isDistributionDisabled } includeBorder={ false } name="isMinting" title="DISTRIBUTE & MINT SONG" - toggleTooltipText={ - webStudioDisableTrackDistributionAndMinting - ? "Track distribution and minting are temporarily disabled, " + - "but we're working on it! You can still upload your tracks and " + - "song details to save for later. Check back in a bit for updates." - : undefined - } + toggleTooltipText={ tooltipContent } onClick={ () => { if (!isArtistPricePlanSelected) handlePricingPlanOpen(); } } @@ -516,18 +537,28 @@ const BasicSongDetails: FunctionComponent = ({ - + + + + diff --git a/packages/elements/src/lib/SwitchInput.tsx b/packages/elements/src/lib/SwitchInput.tsx index 4f7318134..c2c6f89a1 100644 --- a/packages/elements/src/lib/SwitchInput.tsx +++ b/packages/elements/src/lib/SwitchInput.tsx @@ -1,3 +1,5 @@ +import { FunctionComponent, ReactNode } from "react"; + import { IconButton, Stack, @@ -6,8 +8,8 @@ import { Typography, useTheme, } from "@mui/material"; -import { FunctionComponent, ReactNode } from "react"; import HelpIcon from "@mui/icons-material/Help"; + import Switch from "./Switch"; import Tooltip from "./styled/Tooltip"; @@ -16,7 +18,7 @@ export interface SwitchInputProps extends SwitchProps { readonly description?: string; readonly includeBorder?: boolean; readonly title: string; - readonly toggleTooltipText?: string; + readonly toggleTooltipText?: ReactNode; readonly tooltipText?: string; } diff --git a/packages/elements/src/lib/form/SwitchInputField.tsx b/packages/elements/src/lib/form/SwitchInputField.tsx index 1de052da5..a9b5fe549 100644 --- a/packages/elements/src/lib/form/SwitchInputField.tsx +++ b/packages/elements/src/lib/form/SwitchInputField.tsx @@ -1,6 +1,9 @@ +import { FunctionComponent, ReactNode } from "react"; + import { SwitchProps } from "@mui/material"; + import { Field, FieldProps } from "formik"; -import { FunctionComponent, ReactNode } from "react"; + import SwitchInput from "../SwitchInput"; interface SwitchInputFieldProps extends SwitchProps { @@ -9,7 +12,7 @@ interface SwitchInputFieldProps extends SwitchProps { readonly includeBorder?: boolean; readonly name: string; readonly title: string; - readonly toggleTooltipText?: string; + readonly toggleTooltipText?: ReactNode; readonly tooltipText?: string; }