diff --git a/apps/studio/src/common/formUtils.ts b/apps/studio/src/common/formUtils.ts index 0a939f6f..597be11b 100644 --- a/apps/studio/src/common/formUtils.ts +++ b/apps/studio/src/common/formUtils.ts @@ -211,7 +211,7 @@ export const commonYupValidation = { if (!owners) return false; const percentageSum = owners.reduce((sum, owner) => { - return sum + owner.percentage; + return sum + Number(owner.percentage); }, 0); return percentageSum === 100; diff --git a/apps/studio/src/pages/home/library/MintSong.tsx b/apps/studio/src/pages/home/library/MintSong.tsx index f5358d9a..0bbb6caf 100644 --- a/apps/studio/src/pages/home/library/MintSong.tsx +++ b/apps/studio/src/pages/home/library/MintSong.tsx @@ -1,11 +1,16 @@ -import { AlertTitle, Box, Button as MUIButton, Stack } from "@mui/material"; +import { + AlertTitle, + Box, + Button as MUIButton, + Stack, + Typography, +} from "@mui/material"; import { Alert, Button, ErrorMessage, HorizontalLine, SwitchInputField, - Typography, } from "@newm-web/elements"; import theme from "@newm-web/theme"; import { @@ -13,40 +18,28 @@ import { scrollToError, useWindowDimensions, } from "@newm-web/utils"; -import { MintingStatus } from "@newm-web/types"; -import { useConnectWallet } from "@newm.io/cardano-dapp-wallet-connector"; import { Formik, FormikValues } from "formik"; import { useRef, useState } from "react"; import { useNavigate, useParams } from "react-router"; import * as Yup from "yup"; +import { MintingStatus } from "@newm-web/types"; import { SongRouteParams } from "./types"; -import { commonYupValidation, useAppDispatch } from "../../../common"; -import { ConfirmContract } from "../../../components"; -import SelectCoCeators from "../../../components/minting/SelectCoCreators"; +import { commonYupValidation } from "../../../common"; +import SelectCoCreators from "../../../components/minting/SelectCoCreators"; import { useGetRolesQuery } from "../../../modules/content"; -import { - VerificationStatus, - emptyProfile, - useGetProfileQuery, -} from "../../../modules/session"; +import { emptyProfile, useGetProfileQuery } from "../../../modules/session"; import { CollaborationStatus, Creditor, Featured, Owner, emptySong, - useGenerateArtistAgreementThunk, useGetCollaborationsQuery, useGetSongQuery, usePatchSongThunk, } from "../../../modules/song"; -import { - setIsConnectWalletModalOpen, - setIsIdenfyModalOpen, -} from "../../../modules/ui"; interface FormValues { - readonly consentsToContract: boolean; readonly creditors: Array; readonly featured: Array; readonly isMinting: boolean; @@ -54,43 +47,23 @@ interface FormValues { } const MintSong = () => { - const dispatch = useAppDispatch(); const navigate = useNavigate(); const windowWidth = useWindowDimensions()?.width; - const { wallet } = useConnectWallet(); const { songId } = useParams<"songId">() as SongRouteParams; const coCreatorsRef = useRef(null); - const consentsToContractRef = useRef(null); - - const { - data: { - companyName = "", - email, - firstName = "", - lastName = "", - nickname: stageName, - verificationStatus, - role, - } = emptyProfile, - } = useGetProfileQuery(); - const { data: { title, mintingStatus } = emptySong } = - useGetSongQuery(songId); - const { data: collabs = [] } = useGetCollaborationsQuery({ songIds: songId }); - const [patchSong, { isLoading: isSongLoading }] = usePatchSongThunk(); - const [generateArtistAgreement, { isLoading: isArtistAgreementLoading }] = - useGenerateArtistAgreementThunk(); + const { data: { email, role } = emptyProfile } = useGetProfileQuery(); - const [stepIndex, setStepIndex] = useState<0 | 1>(0); - const [showWarning, setShowWarning] = useState(true); + const { data: { mintingStatus } = emptySong } = useGetSongQuery(songId); - const isLoading = isSongLoading || isArtistAgreementLoading; - const isVerified = verificationStatus === VerificationStatus.Verified; - const artistName = `${firstName} ${lastName}`; + const { data: collabs = [] } = useGetCollaborationsQuery({ songIds: songId }); - // some functionality is different if minting has already been initiated - const isMintingInitiated = mintingStatus !== MintingStatus.Undistributed; + const { data: roles = [] } = useGetRolesQuery(); + + const [patchSong, { isLoading }] = usePatchSongThunk(); + + const [showWarning, setShowWarning] = useState(true); // get owners from collaborations array const owners: Array = collabs @@ -157,73 +130,27 @@ const MintSong = () => { // set initial featured artists const initialFeatured = featured.length ? featured : []; - // Set collaborator content as visible if any have been added - const isMinting = collabs.length > 0; + // Set isMinting switch as toggled for minting in progress or completed + const isMinting = mintingStatus !== MintingStatus.Undistributed; const initialValues: FormValues = { - consentsToContract: false, creditors: initialCreditors, featured: initialFeatured, isMinting, owners: initialOwners, }; - const { data: roles = [] } = useGetRolesQuery(); - const validationSchema = Yup.object().shape({ - consentsToContract: Yup.bool().required("This field is required"), creditors: commonYupValidation.creditors(roles), owners: commonYupValidation.owners, }); - const handleSubmitStep = async (values: FormValues) => { - const updatedValues = getUpdatedValues(initialValues, values); - - if (stepIndex === 0) { - handleCompleteFirstStep(); - } else { - await generateArtistAgreement({ - artistName, - companyName, - saved: true, - songId, - songName: title, - stageName, - }); - - patchSong({ id: songId, ...updatedValues }); - } - }; - - const handleCompleteFirstStep = async () => { - await generateArtistAgreement({ - artistName, - companyName, - songName: title, - stageName, - }); - - setStepIndex(1); - }; - - const handleUpdateCollaborators = (values: FormikValues) => { + const handleSubmitForm = (values: FormikValues) => { const updatedValues = getUpdatedValues(initialValues, values); patchSong({ id: songId, ...updatedValues }); }; - const handleVerifyProfile = () => { - dispatch(setIsIdenfyModalOpen(true)); - }; - - const handleConnectWallet = () => { - dispatch(setIsConnectWalletModalOpen(true)); - }; - - const handleSubmitForm = isMintingInitiated - ? handleUpdateCollaborators - : handleSubmitStep; - return ( { showWarning && ( @@ -244,17 +171,12 @@ const MintSong = () => { } > - { isMintingInitiated - ? "Collaborators can't be added or removed after " + - "initiating minting" - : "These details cannot be changed after minting." } + { "Collaborators can't be added or removed after " + + "initiating minting." } - { isMintingInitiated - ? "If you need to add or remove a collaborator, please " + - "contact support." - : "Please review all details carefully before moving forward " + - "with the minting process." } + { "If you need to add or remove a collaborator, please " + + "contact support." } @@ -275,18 +197,6 @@ const MintSong = () => { touched, values, }) => { - // if minting has been initiated, only show save button if - // collaborators have changed, otherwise only show if minting - const isStepOneButtonVisible = isMintingInitiated - ? dirty - : values.isMinting; - - // if minting has been toggled but mint hasn't been initiated - const isMintingFormVisible = !isMintingInitiated && values.isMinting; - - const isStepOneButtonDisabled = - isMintingFormVisible && (!isVerified || !wallet); - const handleChangeOwners = (values: ReadonlyArray) => { setFieldValue("owners", values); }; @@ -302,206 +212,81 @@ const MintSong = () => { scrollToError(errors, isSubmitting, [ { element: coCreatorsRef.current, error: errors.creditors }, { element: coCreatorsRef.current, error: errors.owners }, - { - element: consentsToContractRef.current, - error: errors.consentsToContract, - }, ]); return ( - <> - { stepIndex === 0 && ( - - - - - - { values.isMinting && ( - - ) } - - - { !!touched.owners && !!errors.owners && ( - - { errors.owners as string } - - ) } - - { !!touched.creditors && !!errors.creditors && ( - - - { errors.creditors as string } - - - ) } - - { isMintingFormVisible && !isVerified && ( - - Verify profile - - } - severity="warning" - > - - Verify your profile - - - Profile verification is required to mint. Please - verify your profile. - - - ) } - - { isMintingFormVisible && !wallet && ( - - Connect wallet - - } - severity="warning" - sx={ { py: 2.5 } } - > - Connect a wallet - - To continue, please connect a wallet. - - - ) } - - - - - - - - - - { isStepOneButtonVisible && ( - - ) } - - - ) } - - { stepIndex === 1 && ( - - - ONE LAST THING - - You're almost ready to mint! To proceed please review - your ownership contract and follow the steps below. - - - - 1 } - songTitle={ title } - onConfirm={ (value: boolean) => - setFieldValue("consentsToContract", value) + + + + - + + - + { errors.owners as string } + + ) } + + { !!touched.creditors && !!errors.creditors && ( + + { errors.creditors as string } + + ) } + + + + + + + + + + { dirty && ( + - - - - - ) } - + Update collaborators + + ) } + + ); } } diff --git a/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx b/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx index d54fe9cc..e42ff21c 100644 --- a/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx +++ b/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx @@ -29,7 +29,7 @@ import { MintingStatus } from "@newm-web/types"; import { UploadSongFormValues } from "./UploadSong"; import { NEWM_STUDIO_FAQ_URL, useAppDispatch } from "../../../common"; import { PlaySong, PricingPlansDialog } from "../../../components"; -import SelectCoCeators from "../../../components/minting/SelectCoCreators"; +import SelectCoCreators from "../../../components/minting/SelectCoCreators"; import { useGetGenresQuery, useGetLanguagesQuery, @@ -406,7 +406,7 @@ const BasicSongDetails: FunctionComponent = ({ /> { isMintingVisible && ( -