+
{
const [form] = useForm()
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/EditNftsPostPaySection.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/EditNftsPostPaySection.tsx
new file mode 100644
index 0000000000..0e89354040
--- /dev/null
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/EditNftsPostPaySection.tsx
@@ -0,0 +1,91 @@
+import { Trans } from '@lingui/macro'
+import { Button, Form } from 'antd'
+import { NftPaymentSuccessFormItems } from 'components/Create/components/pages/NftRewards/NftPaymentSuccessFormItems'
+import { PV_V2 } from 'constants/pv'
+import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
+import { useEditProjectDetailsTx } from 'hooks/v2v3/transactor/useEditProjectDetailsTx'
+import { uploadProjectMetadata } from 'lib/api/ipfs'
+import { revalidateProject } from 'lib/api/nextjs'
+import { useCallback, useContext, useState } from 'react'
+import { emitInfoNotification } from 'utils/notifications'
+import {
+ EditNftsPostPayFormFields,
+ useEditNftsPostPayForm,
+} from './useEditNftsPostPayForm'
+
+export function EditNftsPostPaySection() {
+ const [loading, setLoading] = useState()
+ const { projectMetadata, refetchProjectMetadata, projectId } = useContext(
+ ProjectMetadataContext,
+ )
+ const { form, initialValues } = useEditNftsPostPayForm()
+
+ const editProjectDetailsTx = useEditProjectDetailsTx()
+
+ const onProjectFormSaved = useCallback(async () => {
+ setLoading(true)
+
+ const fields: EditNftsPostPayFormFields = form.getFieldsValue(true)
+ const uploadedMetadata = await uploadProjectMetadata({
+ ...projectMetadata,
+ nftPaymentSuccessModal: {
+ ctaText: fields.postPayButtonText,
+ ctaLink: fields.postPayButtonLink,
+ content: fields.postPayMessage,
+ },
+ })
+
+ if (!uploadedMetadata.Hash) {
+ setLoading(false)
+ return
+ }
+
+ const txSuccess = await editProjectDetailsTx(
+ {
+ cid: uploadedMetadata.Hash,
+ },
+ {
+ onConfirmed: async () => {
+ setLoading(false)
+
+ emitInfoNotification('NFT post-pay data changed', {
+ description: 'Your new NFT post-pay has been saved.',
+ })
+
+ if (projectId) {
+ await revalidateProject({
+ pv: PV_V2,
+ projectId: String(projectId),
+ })
+ }
+ refetchProjectMetadata()
+ },
+ onError: () => {
+ setLoading(false)
+ },
+ onCancelled: () => {
+ setLoading(false)
+ },
+ },
+ )
+
+ if (!txSuccess) {
+ setLoading(false)
+ }
+ }, [
+ editProjectDetailsTx,
+ form,
+ projectMetadata,
+ projectId,
+ refetchProjectMetadata,
+ ])
+
+ return (
+
+ )
+}
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/useEditNftsPostPayForm.ts b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/useEditNftsPostPayForm.ts
new file mode 100644
index 0000000000..b921ea3e23
--- /dev/null
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/useEditNftsPostPayForm.ts
@@ -0,0 +1,24 @@
+import { Form } from 'antd'
+import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
+import { useContext } from 'react'
+
+export interface EditNftsPostPayFormFields {
+ postPayMessage: string | undefined
+ postPayButtonText: string | undefined
+ postPayButtonLink: string | undefined
+}
+
+export const useEditNftsPostPayForm = () => {
+ const { projectMetadata } = useContext(ProjectMetadataContext)
+ const [form] = Form.useForm()
+
+ const initialValues: EditNftsPostPayFormFields = {
+ postPayMessage: projectMetadata?.nftPaymentSuccessModal?.content,
+ postPayButtonText: projectMetadata?.nftPaymentSuccessModal?.ctaText,
+ postPayButtonLink: projectMetadata?.nftPaymentSuccessModal?.ctaLink,
+ }
+ return {
+ form,
+ initialValues,
+ }
+}
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsSection.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsSection.tsx
similarity index 97%
rename from src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsSection.tsx
rename to src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsSection.tsx
index d0e4b9ee46..e61124cb5b 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsSection.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsSection.tsx
@@ -7,7 +7,7 @@ import { useUpdateCurrentCollection } from 'components/v2v3/V2V3Project/V2V3Proj
import { useHasNftRewards } from 'hooks/JB721Delegate/useHasNftRewards'
import { useCallback, useState } from 'react'
-import { useEditingNfts } from './hooks/useEditingNfts.tsx'
+import { useEditingNfts } from '../../EditNftsPage/hooks/useEditingNfts'
export function EditNftsSection() {
const [submitLoading, setSubmitLoading] = useState(false)
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsTabs.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/UpdateNftsPage.tsx
similarity index 65%
rename from src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsTabs.tsx
rename to src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/UpdateNftsPage.tsx
index 071cc0cbf5..07b8545546 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsTabs.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/UpdateNftsPage.tsx
@@ -1,9 +1,10 @@
import { t } from '@lingui/macro'
import { Tabs } from 'antd'
import { EditCollectionDetailsSection } from './EditCollectionDetailsSection'
+import { EditNftsPostPaySection } from './EditNftsPostPaySection/EditNftsPostPaySection'
import { EditNftsSection } from './EditNftsSection'
-export function EditNftsTabs() {
+export function UpdateNftsPage() {
const items = [
{ label: t`NFTs`, key: 'nfts', children: },
{
@@ -11,7 +12,11 @@ export function EditNftsTabs() {
key: 'collection',
children: ,
},
- // TODO: add advanced tab
+ {
+ label: t`Post-pay popup`,
+ key: 'post-pay',
+ children: ,
+ },
]
return
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/index.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/index.tsx
new file mode 100644
index 0000000000..009d19ecd3
--- /dev/null
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/index.tsx
@@ -0,0 +1 @@
+export * from './UpdateNftsTabs'
diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index f3bacdfd41..60d8f2429a 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -1511,6 +1511,9 @@ msgstr ""
msgid "Current"
msgstr ""
+msgid "Save post-pay popup"
+msgstr ""
+
msgid "Next cycle, the project will issue {0} tokens per 1 ETH. The cycle after that, the project will issue {1} tokens per 1 ETH."
msgstr ""
@@ -4478,6 +4481,9 @@ msgstr ""
msgid "Percentage to reserve"
msgstr ""
+msgid "Post-pay popup"
+msgstr ""
+
msgid "All assets"
msgstr ""