allow timestamp for juicecrowd

src/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx

@@ -19,7 +19,7 @@ import { useWallet } from 'hooks/Wallet'
 import { trackFathomGoal } from 'lib/fathom'
 import { V2V3CurrencyOption } from 'models/v2v3/currencyOption'
 import Link from 'next/link'
-import { useCallback, useContext, useState } from 'react'
+import { useCallback, useContext, useMemo, useState } from 'react'
 import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached'
 import { inputMustBeEthAddressRule, inputMustExistRule } from 'utils/antdRules'
 import { inputIsLengthRule } from 'utils/antdRules/inputIsLengthRule'
@@ -46,6 +46,32 @@ export const ProjectDetailsPage: React.FC<
   const projectOwnerDifferentThanWalletAddress =
     inputWalletAddress && wallet.userAddress !== inputWalletAddress
 
+  const startTimestamp = Form.useWatch('startTimestamp', formProps.form)
+
+  // just for juicecrowd
+  const launchDate = useMemo(() => {
+    if (!startTimestamp) {
+      return null
+    }
+    const number = Number(startTimestamp)
+    if (isNaN(number)) {
+      return null
+    }
+
+    let date
+    if (number > 1000000000000) {
+      date = new Date(number)
+    } else {
+      date = new Date(number * 1000)
+    }
+
+    // format in local timezone
+    return {
+      local: date.toLocaleString(),
+      utc: date.toUTCString(),
+    }
+  }, [startTimestamp])
+
   return (
     <Form
       {...formProps}
@@ -217,6 +243,19 @@ export const ProjectDetailsPage: React.FC<
               >
                 <AmountInput />
               </Form.Item>
+
+              <Form.Item
+                name="startTimestamp"
+                label={<Trans>Start date timestamp</Trans>}
+                tooltip={t`The timestamp for the start of the project.`}
+              >
+                <JuiceInput />
+              </Form.Item>
+              {launchDate && (
+                <div className="text-gray-500 text-sm">
+                  {t`Launch date: ${launchDate.local} (${launchDate.utc})`}
+                </div>
+              )}
             </CreateCollapse.Panel>
           )}
         </CreateCollapse>

src/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts

@@ -1,9 +1,14 @@
+import { Form } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
 import { ProjectTagName } from 'models/project-tags'
 import { V2V3CurrencyOption } from 'models/v2v3/currencyOption'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
+import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
-import { editingV2ProjectActions } from 'redux/slices/editingV2Project'
+import {
+  DEFAULT_MUST_START_AT_OR_AFTER,
+  editingV2ProjectActions,
+} from 'redux/slices/editingV2Project'
 import { V2V3_CURRENCY_USD } from 'utils/v2v3/currency'
 import { useFormDispatchWatch } from '../../hooks'
 import { AmountInputValue } from '../ProjectDetailsPage'
@@ -28,13 +33,13 @@ type ProjectDetailsFormProps = Partial<{
   introImageUri: string
   // Only relevant to Juicecrowd
   softTarget: AmountInputValue
+  startTimestamp: string
 }>
 
 export const useProjectDetailsForm = () => {
   const [form] = useForm<ProjectDetailsFormProps>()
-  const { projectMetadata, inputProjectOwner } = useAppSelector(
-    state => state.editingV2Project,
-  )
+  const { projectMetadata, inputProjectOwner, mustStartAtOrAfter } =
+    useAppSelector(state => state.editingV2Project)
 
   const initialValues: ProjectDetailsFormProps = useMemo(
     () => ({
@@ -54,6 +59,11 @@ export const useProjectDetailsForm = () => {
       // Only relevant to Juicecrowd
       introVideoUrl: projectMetadata.introVideoUrl,
       introImageUri: projectMetadata.introImageUri,
+      startTimestamp:
+        mustStartAtOrAfter !== DEFAULT_MUST_START_AT_OR_AFTER &&
+        !isNaN(parseInt(mustStartAtOrAfter))
+          ? mustStartAtOrAfter
+          : '',
       softTarget:
         projectMetadata.softTargetAmount && projectMetadata.softTargetCurrency
           ? {
@@ -82,6 +92,7 @@ export const useProjectDetailsForm = () => {
       projectMetadata.softTargetAmount,
       projectMetadata.softTargetCurrency,
       inputProjectOwner,
+      mustStartAtOrAfter,
     ],
   )
 
@@ -198,5 +209,26 @@ export const useProjectDetailsForm = () => {
     formatter: v => v ?? { amount: '', currency: V2V3_CURRENCY_USD },
   })
 
+  const startTimestamp = Form.useWatch('startTimestamp', form)
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (!startTimestamp) return
+    const launchDate = parseInt(startTimestamp)
+    if (isNaN(launchDate)) return
+    // check if launch date is in ms or seconds
+    if (launchDate > 1000000000000) {
+      dispatch(
+        editingV2ProjectActions.setMustStartAtOrAfter(
+          (launchDate / 1000).toString(),
+        ),
+      )
+    } else {
+      dispatch(
+        editingV2ProjectActions.setMustStartAtOrAfter(launchDate.toString()),
+      )
+    }
+  }, [dispatch, startTimestamp])
+
   return { form, initialValues }
 }

src/locales/messages.pot

@@ -1379,6 +1379,9 @@ msgstr ""
 msgid "Use NFTs for redemptions"
 msgstr ""
 
+msgid "Launch date: {0} ({1})"
+msgstr ""
+
 msgid "Assets"
 msgstr ""
 
@@ -2090,6 +2093,9 @@ msgstr ""
 msgid "Crowdfunding"
 msgstr ""
 
+msgid "Start date timestamp"
+msgstr ""
+
 msgid "30 days"
 msgstr ""
 
@@ -3143,6 +3149,9 @@ msgstr ""
 msgid "Payments to this project are paused in this cycle."
 msgstr ""
 
+msgid "The timestamp for the start of the project."
+msgstr ""
+
 msgid "Redemption rate"
 msgstr ""