Merge pull request #326 from public-awesome/time-input-updates

Time input updates

components/collections/creation/CollectionDetails.tsx

@@ -192,11 +192,13 @@ export const CollectionDetails = ({
                       : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
                   }
                   onChange={(date) =>
-                    setTimestamp(
-                      timezone === 'Local'
-                        ? date
-                        : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
-                    )
+                    date
+                      ? setTimestamp(
+                          timezone === 'Local'
+                            ? date
+                            : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                        )
+                      : setTimestamp(undefined)
                   }
                   value={
                     timezone === 'Local'

components/collections/creation/MintingDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable no-nested-ternary */
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
@@ -22,6 +23,8 @@ interface MintingDetailsProps {
   minimumMintPrice: number
   mintingTokenFromFactory?: TokenInfo
   importedMintingDetails?: MintingDetailsDataProps
+  isPresale: boolean
+  whitelistStartDate?: string
 }
 
 export interface MintingDetailsDataProps {
@@ -40,6 +43,8 @@ export const MintingDetails = ({
   minimumMintPrice,
   mintingTokenFromFactory,
   importedMintingDetails,
+  isPresale,
+  whitelistStartDate,
 }: MintingDetailsProps) => {
   const wallet = useWallet()
   const { timezone } = useGlobalSettings()
@@ -129,6 +134,12 @@ export const MintingDetails = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [importedMintingDetails])
 
+  useEffect(() => {
+    if (isPresale) {
+      setTimestamp(whitelistStartDate ? new Date(Number(whitelistStartDate) / 1_000_000) : undefined)
+    }
+  }, [whitelistStartDate, isPresale])
+
   return (
     <div>
       <FormGroup subtitle="Information about your minting settings" title="Minting Details">
@@ -162,17 +173,22 @@ export const MintingDetails = ({
         <FormControl
           htmlId="timestamp"
           isRequired
-          subtitle={`Minting start time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+          subtitle={`Minting start time ${isPresale ? '(is dictated by whitelist start time)' : ''} ${
+            timezone === 'Local' ? '(local)' : '(UTC)'
+          }`}
           title="Start Time"
         >
           <InputDateTime
+            disabled={isPresale}
             minDate={
               timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
             }
             onChange={(date) =>
-              setTimestamp(
-                timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
-              )
+              date
+                ? setTimestamp(
+                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                  )
+                : setTimestamp(undefined)
             }
             value={
               timezone === 'Local'

components/collections/creation/WhitelistDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable no-nested-ternary */
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
@@ -331,16 +332,20 @@ export const WhitelistDetails = ({
               htmlId="start-date"
               isRequired
               subtitle="Start time for minting tokens to whitelisted addresses"
-              title={`Start Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+              title={`Whitelist Start Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
             >
               <InputDateTime
                 minDate={
                   timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
                 }
                 onChange={(date) =>
-                  setStartDate(
-                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
-                  )
+                  date
+                    ? setStartDate(
+                        timezone === 'Local'
+                          ? date
+                          : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                      )
+                    : setStartDate(undefined)
                 }
                 value={
                   timezone === 'Local'
@@ -354,17 +359,21 @@ export const WhitelistDetails = ({
             <FormControl
               htmlId="end-date"
               isRequired
-              subtitle="End time for minting tokens to whitelisted addresses"
-              title={`End Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+              subtitle="Whitelist End Time dictates when public sales will start"
+              title={`Whitelist End Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
             >
               <InputDateTime
                 minDate={
                   timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
                 }
                 onChange={(date) =>
-                  setEndDate(
-                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
-                  )
+                  date
+                    ? setEndDate(
+                        timezone === 'Local'
+                          ? date
+                          : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                      )
+                    : setEndDate(undefined)
                 }
                 value={
                   timezone === 'Local'

components/openEdition/CollectionDetails.tsx

@@ -236,9 +236,13 @@ export const CollectionDetails = ({
                   timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
                 }
                 onChange={(date) =>
-                  setTimestamp(
-                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
-                  )
+                  date
+                    ? setTimestamp(
+                        timezone === 'Local'
+                          ? date
+                          : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                      )
+                    : setTimestamp(undefined)
                 }
                 value={
                   timezone === 'Local'

components/openEdition/MintingDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable no-nested-ternary */
 import { Conditional } from 'components/Conditional'
 import { FormControl } from 'components/FormControl'
@@ -175,9 +176,11 @@ export const MintingDetails = ({
               timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
             }
             onChange={(date) =>
-              setTimestamp(
-                timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
-              )
+              date
+                ? setTimestamp(
+                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                  )
+                : setTimestamp(undefined)
             }
             value={
               timezone === 'Local'
@@ -188,6 +191,7 @@ export const MintingDetails = ({
             }
           />
         </FormControl>
+
         <div className="flex-row mt-2 w-full form-control">
           <h1 className="mt-2 font-bold text-md">Limit Type: </h1>
           <label className="justify-start ml-6 cursor-pointer label">
@@ -225,9 +229,13 @@ export const MintingDetails = ({
                 timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
               }
               onChange={(date) =>
-                setEndTimestamp(
-                  timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
-                )
+                date
+                  ? setEndTimestamp(
+                      timezone === 'Local'
+                        ? date
+                        : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                    )
+                  : setEndTimestamp(undefined)
               }
               value={
                 timezone === 'Local'

pages/collections/create.tsx

@@ -1908,6 +1908,7 @@ const CollectionCreationPage: NextPage = () => {
             <Conditional test={minterType === 'vending'}>
               <MintingDetails
                 importedMintingDetails={importedDetails?.mintingDetails}
+                isPresale={whitelistDetails?.whitelistState === 'new'}
                 minimumMintPrice={
                   whitelistDetails?.whitelistState !== 'none' && whitelistDetails?.whitelistType === 'flex'
                     ? Number(minimumFlexMintPrice) / 1000000
@@ -1919,6 +1920,7 @@ const CollectionCreationPage: NextPage = () => {
                 numberOfTokens={uploadDetails?.assetFiles.length}
                 onChange={setMintingDetails}
                 uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
+                whitelistStartDate={whitelistDetails?.startTime}
               />
             </Conditional>
           </div>