Add limit type selection to OE MintingDetails

components/openEdition/MintingDetails.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable no-nested-ternary */
+import { Conditional } from 'components/Conditional'
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
 import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
@@ -15,6 +16,8 @@ import { useWallet } from 'utils/wallet'
 import { NumberInput, TextInput } from '../forms/FormInput'
 import type { UploadMethod } from './OffChainMetadataUploadDetails'
 
+export type LimitType = 'count_limited' | 'time_limited'
+
 interface MintingDetailsProps {
   onChange: (data: MintingDetailsDataProps) => void
   uploadMethod: UploadMethod
@@ -27,9 +30,11 @@ export interface MintingDetailsDataProps {
   unitPrice: string
   perAddressLimit: number
   startTime: string
-  endTime: string
+  endTime?: string
+  tokenCountLimit?: number
   paymentAddress?: string
   selectedMintToken?: TokenInfo
+  limitType: LimitType
 }
 
 export const MintingDetails = ({
@@ -45,6 +50,7 @@ export const MintingDetails = ({
   const [endTimestamp, setEndTimestamp] = useState<Date | undefined>()
   const [selectedMintToken, setSelectedMintToken] = useState<TokenInfo | undefined>(stars)
   const [mintingDetailsImported, setMintingDetailsImported] = useState(false)
+  const [limitType, setLimitType] = useState<LimitType>('time_limited')
   const { timezone } = useGlobalSettings()
 
   const unitPriceState = useNumberInputState({
@@ -65,6 +71,14 @@ export const MintingDetails = ({
     placeholder: '1',
   })
 
+  const tokenCountLimitState = useNumberInputState({
+    id: 'tokencountlimit',
+    name: 'tokencountlimit',
+    title: 'Maximum Token Count',
+    subtitle: 'Total number of mintable tokens',
+    placeholder: '100',
+  })
+
   const paymentAddressState = useInputState({
     id: 'payment-address',
     name: 'paymentAddress',
@@ -97,6 +111,8 @@ export const MintingDetails = ({
       endTime: endTimestamp ? (endTimestamp.getTime() * 1_000_000).toString() : '',
       paymentAddress: paymentAddressState.value.trim(),
       selectedMintToken,
+      limitType,
+      tokenCountLimit: limitType === 'count_limited' ? tokenCountLimitState.value : undefined,
     }
     onChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -107,6 +123,8 @@ export const MintingDetails = ({
     endTimestamp,
     paymentAddressState.value,
     selectedMintToken,
+    tokenCountLimitState.value,
+    limitType,
   ])
 
   useEffect(() => {
@@ -168,30 +186,60 @@ export const MintingDetails = ({
             }
           />
         </FormControl>
-        <FormControl
-          htmlId="endTimestamp"
-          isRequired
-          subtitle={`Minting end time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
-          title="End Time"
-        >
-          <InputDateTime
-            minDate={
-              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),
-              )
-            }
-            value={
-              timezone === 'Local'
-                ? endTimestamp
-                : endTimestamp
-                ? new Date(endTimestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
-                : undefined
-            }
-          />
-        </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">
+            <span className="mr-2">Time</span>
+            <input
+              checked={limitType === 'time_limited'}
+              className={`${limitType === 'time_limited' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+              onClick={() => {
+                setLimitType('time_limited' as LimitType)
+              }}
+              type="checkbox"
+            />
+          </label>
+          <label className="justify-start ml-4 cursor-pointer label">
+            <span className="mr-2">Token Count</span>
+            <input
+              checked={limitType === 'count_limited'}
+              className={`${limitType === 'count_limited' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+              onClick={() => {
+                setLimitType('count_limited' as LimitType)
+              }}
+              type="checkbox"
+            />
+          </label>
+        </div>
+        <Conditional test={limitType === 'time_limited'}>
+          <FormControl
+            htmlId="endTimestamp"
+            isRequired
+            subtitle={`Minting end time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+            title="End Time"
+          >
+            <InputDateTime
+              minDate={
+                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),
+                )
+              }
+              value={
+                timezone === 'Local'
+                  ? endTimestamp
+                  : endTimestamp
+                  ? new Date(endTimestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                  : undefined
+              }
+            />
+          </FormControl>
+        </Conditional>
+        <Conditional test={limitType === 'count_limited'}>
+          <NumberInput {...tokenCountLimitState} isRequired />
+        </Conditional>
       </FormGroup>
       <TextInput className="pr-4 pl-4 mt-3" {...paymentAddressState} />
     </div>