From 3bb37ae27e47c15d62187f646822525a4e3fc57c Mon Sep 17 00:00:00 2001 From: David Kirshon <86050631+dmkirshon@users.noreply.github.com> Date: Thu, 27 Jun 2024 16:11:12 +0200 Subject: [PATCH] STUD-78-Consolidate-Distribute-Minting-form-logic-for-uploaded-songs (#689) * refactor: Remove alerts that will never be visible * fix: Convert owner percent to Number for yup test Fix edge case where owner percentage is loaded into text input field and value is read as String for the yup validation test. * refactor: Remove unnecessary alert handlers * refactor: Remove minting form step never reached * refactor: Clean up remaining minting logic --- apps/studio/src/common/formUtils.ts | 2 +- .../src/pages/home/library/MintSong.tsx | 401 ++++-------------- .../home/uploadSong/BasicSongDetails.tsx | 4 +- 3 files changed, 96 insertions(+), 311 deletions(-) diff --git a/apps/studio/src/common/formUtils.ts b/apps/studio/src/common/formUtils.ts index 0a939f6f8..597be11b6 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 f5358d9aa..0bbb6caf2 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 d54fe9ccb..e42ff21c1 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 && ( -