From e6141ee5c67a7dc2b97d3a61334d048a4e1abeee Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Wed, 27 Nov 2024 22:10:17 +1000
Subject: [PATCH] feat: disable pay in cycle=0

---
 src/locales/messages.pot                      | 12 +++-
 .../FirstCycleCountdownCallout.tsx            | 30 ++++++++++
 .../PayRedeemCard/PayRedeemCard.tsx           | 55 +++++++++++++------
 3 files changed, 78 insertions(+), 19 deletions(-)
 create mode 100644 src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/FirstCycleCountdownCallout.tsx

diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index 6c75493759..9ab838e6a6 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -554,9 +554,6 @@ msgstr ""
 msgid "If locked, this payout can't be edited or removed until the lock expires or the cycle is edited."
 msgstr ""
 
-msgid "Project isn't currently issuing tokens, but is issuing NFTs"
-msgstr ""
-
 msgid "I understand"
 msgstr ""
 
@@ -2411,6 +2408,9 @@ msgstr ""
 msgid "Export a list of this cycle's reserved token recipients to CSV."
 msgstr ""
 
+msgid "Payments open in {remainingTimeText}"
+msgstr ""
+
 msgid "Redeem"
 msgstr ""
 
@@ -2873,6 +2873,9 @@ msgstr ""
 msgid "Collection details"
 msgstr ""
 
+msgid "{0} isn't currently issuing tokens"
+msgstr ""
+
 msgid "Token ticker is required"
 msgstr ""
 
@@ -4007,6 +4010,9 @@ msgstr ""
 msgid "Amount (ETH)"
 msgstr ""
 
+msgid "{0} is currently only issuing NFTs"
+msgstr ""
+
 msgid "You haven't created any projects yet!"
 msgstr ""
 
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/FirstCycleCountdownCallout.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/FirstCycleCountdownCallout.tsx
new file mode 100644
index 0000000000..3089ba99e5
--- /dev/null
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/FirstCycleCountdownCallout.tsx
@@ -0,0 +1,30 @@
+import { ClockIcon } from '@heroicons/react/24/outline'
+import { Trans } from '@lingui/macro'
+import { useCountdownClock } from 'components/Project/hooks/useCountdownClock'
+import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
+import { useProjectUpcomingFundingCycle } from 'packages/v2v3/hooks/contractReader/useProjectUpcomingFundingCycle'
+import { twMerge } from 'tailwind-merge'
+
+export function FirstCycleCountdownCallout() {
+  const { projectId } = useProjectMetadataContext()
+
+  // inefficient extra call, but meh
+  const fc = useProjectUpcomingFundingCycle({ projectId })
+  const start = fc?.data?.[0]?.start?.toNumber()
+  const { remainingTimeText } = useCountdownClock(start)
+
+  if (!start) {
+    return null
+  }
+  return (
+    <div
+      className={twMerge(
+        'flex items-center gap-2 rounded-lg py-2 px-3.5 text-sm font-medium shadow-sm',
+        'border-warning-100 bg-warning-25 text-warning-700 dark:border-warning-800 dark:bg-warning-950 dark:text-warning-400',
+      )}
+    >
+      <ClockIcon className="h-5 w-5" />
+      <Trans>Payments open in {remainingTimeText}</Trans>
+    </div>
+  )
+}
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx
index 934eab322e..c89ea7576b 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx
@@ -55,6 +55,7 @@ import { projectCartActions } from '../../redux/projectCartSlice'
 import { ClaimErc20Callout } from '../ClaimErc20Callout'
 import { EthPerTokenAccordion } from '../EthPerTokenAccordion'
 import { ProjectCartNftReward } from '../ReduxProjectCartProvider'
+import { FirstCycleCountdownCallout } from './FirstCycleCountdownCallout'
 import { PayProjectModal } from './PayProjectModal/PayProjectModal'
 
 const MAX_AMOUNT = BigInt(Number.MAX_SAFE_INTEGER)
@@ -75,6 +76,7 @@ type PayRedeemCardProps = {
 
 export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
   const project = useProjectContext()
+  const metadata = useProjectMetadataContext()
   const state = useProjectSelector(state => state.payRedeem.cardState)
   const dispatch = useProjectDispatch()
   // TODO: We should probably break out tokens panel hook into reusable module
@@ -119,6 +121,9 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
   }
 
   const noticeText = useMemo(() => {
+    if (project.fundingCycle?.number?.isZero()) {
+      return
+    }
     const showPayerIssuance =
       !payerIssuanceRate.enabled && !payerIssuanceRate.loading
     if (!showPayerIssuance) {
@@ -127,13 +132,20 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
 
     const showNfts = hasNfts && !hasNftsLoading
     if (showNfts) {
-      return t`Project isn't currently issuing tokens, but is issuing NFTs`
+      return t`${metadata.projectMetadata?.name} is currently only issuing NFTs`
     }
 
-    return t`Project isn't currently issuing tokens`
-  }, [payerIssuanceRate, hasNfts, hasNftsLoading])
+    return t`${metadata.projectMetadata?.name} isn't currently issuing tokens`
+  }, [
+    payerIssuanceRate,
+    hasNfts,
+    hasNftsLoading,
+    metadata,
+    project.fundingCycle,
+  ])
 
   const redeemDisabled =
+    project.fundingCycle?.number?.isZero() ||
     project.fundingCycleMetadata?.redemptionRate.eq(0) ||
     isInfiniteDistributionLimit(project.distributionLimit)
 
@@ -183,15 +195,17 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
 
       <EthPerTokenAccordion />
 
-      {!payerIssuanceRate.enabled && !payerIssuanceRate.loading && (
-        <Callout.Info
-          className="mt-6 py-2 px-3.5 text-xs leading-5 dark:bg-slate-700"
-          collapsible={false}
-          icon={<InformationCircleIcon className="h-5 w-5" />}
-        >
-          {noticeText}
-        </Callout.Info>
-      )}
+      {!payerIssuanceRate.enabled &&
+        !payerIssuanceRate.loading &&
+        noticeText && (
+          <Callout.Info
+            className="mt-6 py-2 px-3.5 text-sm leading-5 dark:bg-slate-700"
+            collapsible={false}
+            icon={<InformationCircleIcon className="h-5 w-5" />}
+          >
+            {noticeText}
+          </Callout.Info>
+        )}
 
       <NftCreditsCallout />
 
@@ -443,7 +457,7 @@ const PayConfiguration: React.FC<PayConfigurationProps> = ({
   payerIssuanceRate,
 }) => {
   const { payDisabled, message } = usePayProjectDisabled()
-  const { tokenSymbol } = useProjectContext()
+  const { tokenSymbol, fundingCycle } = useProjectContext()
   const chosenNftRewards = useProjectSelector(
     state => state.projectCart.chosenNftRewards,
   )
@@ -516,13 +530,22 @@ const PayConfiguration: React.FC<PayConfigurationProps> = ({
       insufficientBalance ||
       cartPayAmount === 0 ||
       !cartPayAmount ||
-      payDisabled
+      payDisabled ||
+      fundingCycle?.number?.isZero()
     )
-  }, [cartPayAmount, insufficientBalance, payDisabled, walletConnected])
+  }, [
+    cartPayAmount,
+    insufficientBalance,
+    payDisabled,
+    walletConnected,
+    fundingCycle,
+  ])
 
   return (
     <div>
-      <div className="relative">
+      {fundingCycle?.number?.isZero() && <FirstCycleCountdownCallout />}
+
+      <div className="relative mt-3">
         <div className="flex flex-col gap-y-2">
           <PayRedeemInput
             label={t`You pay`}