Edit NFTs [1/2]: Redo /settings/nfts to account for all project NFT states

src/components/Create/Create.tsx

@@ -12,8 +12,8 @@ import { NetworkName } from 'models/networkName'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import {
+  AddNftCollectionForm,
   FundingCyclesPage,
-  NftRewardsPage,
   ProjectDetailsPage,
   ProjectTokenPage,
   ReconfigurationRulesPage,
@@ -124,7 +124,7 @@ export function Create() {
               <Trans>Reward your supporters with custom NFTs.</Trans>
             }
           >
-            <NftRewardsPage />
+            <AddNftCollectionForm />
           </Wizard.Page>
           <Wizard.Page
             name="reconfigurationRules"

src/components/Create/components/pages/NftRewards/NftRewardsPage.tsx → src/components/Create/components/pages/NftRewards/AddNftCollectionForm.tsx

@@ -31,7 +31,11 @@ import { Wizard } from '../../Wizard'
 import { PageContext } from '../../Wizard/contexts/PageContext'
 import { useNftRewardsForm } from './hooks'
 
-export const NftRewardsPage = () => {
+export const AddNftCollectionForm = ({
+  okButton,
+}: {
+  okButton?: React.ReactNode
+}) => {
   useSetCreateFurthestPageReached('nftRewards')
   const { form, initialValues } = useNftRewardsForm()
   const lockPageRulesWrapper = useLockPageRulesWrapper()
@@ -258,7 +262,7 @@ export const NftRewardsPage = () => {
             </div>
           )}
         </div>
-        <Wizard.Page.ButtonControl />
+        {okButton ?? <Wizard.Page.ButtonControl />}
       </Form>
 
       <div className="mt-8 text-center">

src/components/Create/components/pages/NftRewards/index.ts

@@ -1 +1 @@
-export * from './NftRewardsPage'
+export * from './AddNftCollectionForm'

src/components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsContent.tsx

@@ -4,6 +4,7 @@ import { Trans, t } from '@lingui/macro'
 import { Button, Layout } from 'antd'
 import { V2V3SettingsPageKey } from 'components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsDashboard'
 import { FEATURE_FLAGS } from 'constants/featureFlags'
+import { useHasNftRewards } from 'hooks/JB721Delegate/useHasNftRewards'
 import Link from 'next/link'
 import { useMemo } from 'react'
 import { twJoin } from 'tailwind-merge'
@@ -14,6 +15,7 @@ import { ArchiveProjectSettingsPage } from './pages/ArchiveProjectSettingsPage'
 import { EditNftsPage } from './pages/EditNftsPage'
 import { GovernanceSettingsPage } from './pages/GovernanceSettingsPage'
 import { EditCyclePage } from './pages/NewEditCyclePage/EditCyclePage'
+import { EditNftsPage as NewEditNftsPage } from './pages/NewEditNftsPage/EditNftsPage'
 import { PayoutsSettingsPage } from './pages/PayoutsSettingsPage'
 import { ProjectDetailsSettingsPage } from './pages/ProjectDetailsSettingsPage/ProjectDetailsSettingsPage'
 import { ProjectHandleSettingsPage } from './pages/ProjectHandleSettingsPage'
@@ -32,7 +34,9 @@ const SettingsPageComponents: {
   cycle: featureFlagEnabled(FEATURE_FLAGS.NEW_CYCLE_CONFIG_PAGE)
     ? EditCyclePage
     : ReconfigureFundingCycleSettingsPage,
-  nfts: EditNftsPage,
+  nfts: featureFlagEnabled(FEATURE_FLAGS.NEW_EDIT_NFTS)
+    ? NewEditNftsPage
+    : EditNftsPage,
   payouts: PayoutsSettingsPage,
   reservedtokens: ReservedTokensSettingsPage,
   tokenmigration: V1V2TokenMigrationSettingsPage,
@@ -43,15 +47,17 @@ const SettingsPageComponents: {
   projectnft: ProjectNftSettingsPage,
 }
 
-const V2V3SettingsPageKeyTitleMap = (): {
+const V2V3SettingsPageKeyTitleMap = (
+  hasExistingNfts: boolean,
+): {
   [k in V2V3SettingsPageKey]: string
 } => ({
   general: t`General`,
   handle: t`Project handle`,
   cycle: t`Cycle configuration`,
   payouts: t`Payouts`,
   reservedtokens: t`Reserved token recipients`,
-  nfts: t`Edit NFT collection`,
+  nfts: hasExistingNfts ? t`Edit NFT collection` : t`Launch New NFT Collection`,
   tokenmigration: t`Token migration`,
   transferownership: t`Transfer ownership`,
   archiveproject: t`Archive project`,
@@ -99,12 +105,15 @@ export function ProjectSettingsContent({
 }: {
   settingsPageKey: V2V3SettingsPageKey
 }) {
+  const { value: hasExistingNfts } = useHasNftRewards()
+
   const ActiveSettingsPage = useMemo(
     () => SettingsPageComponents[settingsPageKey],
     [settingsPageKey],
   )
 
-  const pageTitle = V2V3SettingsPageKeyTitleMap()[settingsPageKey]
+  const pageTitle =
+    V2V3SettingsPageKeyTitleMap(hasExistingNfts)[settingsPageKey]
 
   return (
     <ProjectSettingsLayout>

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsPage.tsx

@@ -1,42 +1,25 @@
-import { t, Trans } from '@lingui/macro'
-import { Button, Empty, Tabs } from 'antd'
+import { Trans } from '@lingui/macro'
+import { Button, Empty } from 'antd'
 import Loading from 'components/Loading'
-import { FEATURE_FLAGS } from 'constants/featureFlags'
 import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { V2V3ProjectContext } from 'contexts/v2v3/Project/V2V3ProjectContext'
 import { useHasNftRewards } from 'hooks/JB721Delegate/useHasNftRewards'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useContext } from 'react'
-import { featureFlagEnabled } from 'utils/featureFlags'
 import { settingsPagePath } from 'utils/routes'
-import { EditCollectionDetailsSection } from './EditCollectionDetailsSection'
-import { EditNftsSection } from './EditNftsSection'
-import { NewEditNftsSection } from './NewEditNftsSection'
+import { EditNftsTabs } from './EditNftsTabs'
 import blueberry from '/public/assets/images/blueberry-ol.png'
 
 export function EditNftsPage() {
   const { value: hasExistingNfts, loading: hasNftsLoading } = useHasNftRewards()
   const { projectId } = useContext(ProjectMetadataContext)
   const { handle } = useContext(V2V3ProjectContext)
 
-  const items = [
-    { label: t`NFTs`, key: 'nfts', children: <EditNftsSection /> },
-    {
-      label: t`Collection details`,
-      key: 'collection',
-      children: <EditCollectionDetailsSection />,
-    },
-  ]
-
   if (hasNftsLoading) {
     return <Loading />
   }
 
-  if (featureFlagEnabled(FEATURE_FLAGS.NEW_EDIT_NFTS)) {
-    return <NewEditNftsSection />
-  }
-
   if (!hasExistingNfts) {
     return (
       <div className="m-auto max-w-lg">
@@ -78,5 +61,5 @@ export function EditNftsPage() {
     )
   }
 
-  return <Tabs items={items} />
+  return <EditNftsTabs />
 }

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsTabs.tsx

@@ -0,0 +1,18 @@
+import { t } from '@lingui/macro'
+import { Tabs } from 'antd'
+import { EditCollectionDetailsSection } from './EditCollectionDetailsSection'
+import { EditNftsSection } from './EditNftsSection'
+
+export function EditNftsTabs() {
+  const items = [
+    { label: t`NFTs`, key: 'nfts', children: <EditNftsSection /> },
+    {
+      label: t`Collection details`,
+      key: 'collection',
+      children: <EditCollectionDetailsSection />,
+    },
+    // TODO: add advanced tab
+  ]
+
+  return <Tabs items={items} />
+}

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/ReviewConfirmModal/ReviewConfirmModal.tsx

@@ -57,7 +57,7 @@ export function ReviewConfirmModal({
         open={open}
         title={<Trans>Review & confirm</Trans>}
         destroyOnClose
-        onOk={reconfigureFundingCycle}
+        onOk={() => reconfigureFundingCycle()}
         okText={<Trans>Deploy changes</Trans>}
         okButtonProps={{ disabled: !formHasChanges }}
         cancelButtonProps={{ hidden: true }}

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EditNftsPage.tsx

@@ -0,0 +1,31 @@
+import Loading from 'components/Loading'
+import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
+import { V2V3ProjectContext } from 'contexts/v2v3/Project/V2V3ProjectContext'
+import { useNftDeployerCanReconfigure } from 'hooks/JB721Delegate/contractReader/useNftDeployerCanReconfigure'
+import { useHasNftRewards } from 'hooks/JB721Delegate/useHasNftRewards'
+import { useContext } from 'react'
+import { EditNftsTabs } from '../EditNftsPage/EditNftsTabs'
+import { EnableNftsCard } from './EnableNftsCard'
+import { LaunchNftsPage } from './LaunchNftsPage'
+
+export function EditNftsPage() {
+  const { projectId } = useContext(ProjectMetadataContext)
+  const { projectOwnerAddress } = useContext(V2V3ProjectContext)
+  const { value: hasExistingNfts, loading: hasNftsLoading } = useHasNftRewards()
+
+  const nftDeployerCanReconfigure = useNftDeployerCanReconfigure({
+    projectId,
+    projectOwnerAddress,
+  })
+
+  if (hasNftsLoading) {
+    return <Loading />
+  }
+  if (hasExistingNfts) {
+    return <EditNftsTabs />
+  } else if (!nftDeployerCanReconfigure) {
+    return <EnableNftsCard />
+  } else {
+    return <LaunchNftsPage />
+  }
+}

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EnableNftsCard.tsx

@@ -0,0 +1,39 @@
+import { Trans } from '@lingui/macro'
+import { Button } from 'antd'
+import Image from 'next/image'
+import { useState } from 'react'
+import { EnableNftsModal } from './EnableNftsModal'
+import noNftsImage from '/public/assets/images/settings/no-nfts.webp'
+
+export function EnableNftsCard() {
+  const [enableNftsModalOpen, setEnableNftsModalOpen] = useState<boolean>(false)
+  return (
+    <>
+      <div className="flex flex-col items-center gap-5">
+        <Image
+          src={noNftsImage}
+          alt={`No NFT collection`}
+          width={200}
+          height={200}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
+        />
+        <span className="text-secondary">
+          <Trans>You haven't launched an NFT collection yet.</Trans>
+        </span>
+        <Button type="primary" onClick={() => setEnableNftsModalOpen(true)}>
+          <span>
+            <Trans>Enable NFTs</Trans>
+          </span>
+        </Button>
+      </div>
+
+      <EnableNftsModal
+        open={enableNftsModalOpen}
+        onClose={() => setEnableNftsModalOpen(false)}
+      />
+    </>
+  )
+}

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EnableNftsModal.tsx → src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EnableNftsModal.tsx

@@ -4,6 +4,7 @@ import TooltipIcon from 'components/TooltipIcon'
 import TransactionModal from 'components/modals/TransactionModal'
 import { useSetNftOperatorPermissionsTx } from 'hooks/JB721Delegate/transactor/useSetNftOperatorPermissionsTx'
 import { useState } from 'react'
+import { reloadWindow } from 'utils/windowUtils'
 
 export function EnableNftsModal({
   open,
@@ -21,7 +22,7 @@ export function EnableNftsModal({
     await setNftOperatorPermissionsTx(undefined, {
       onConfirmed: () => {
         setLoading(false)
-        onClose()
+        reloadWindow()
       },
       onDone() {
         setLoading(false)
@@ -43,8 +44,8 @@ export function EnableNftsModal({
       confirmLoading={loading}
     >
       <Trans>
-        To add NFTs to your cycle. You'll need to{' '}
-        <strong>grant NFT permissions</strong> before launching your new cycle.
+        To add NFTs to your next cycle, you'll need to{' '}
+        <strong>grant NFT permissions</strong>.
       </Trans>{' '}
       <TooltipIcon
         tip={

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/LaunchNftsPage.tsx

@@ -0,0 +1,10 @@
+import { AddNftCollectionForm } from 'components/Create/components'
+import { UploadAndLaunchNftsButton } from './UploadAndLaunchNftsButton'
+
+export function LaunchNftsPage() {
+  return (
+    <AddNftCollectionForm
+      okButton={<UploadAndLaunchNftsButton className="mt-10" />}
+    />
+  )
+}