implemented non sellable tickets and also fixed up date and time bugs

src/components/DateRangePicker/DateRangePicker.tsx

@@ -163,11 +163,19 @@ function CustomDateRangePicker({
   };
 
   const onBlurStartTime = (e) => {
-    checkAndSetTime(e.target.value, setStartTimeText, setStartTimeError);
+    if (e.target.value !== '') {
+      checkAndSetTime(e.target.value, setStartTimeText, setStartTimeError);
+    } else {
+      setStartTimeError(false);
+    }
   };
 
   const onBlurEndTime = (e) => {
-    checkAndSetTime(e.target.value, setEndTimeText, setEndTimeError);
+    if (e.target.value !== '') {
+      checkAndSetTime(e.target.value, setEndTimeText, setEndTimeError);
+    } else {
+      setEndTimeError(false);
+    }
   };
 
   return (

src/components/DateRangePicker/MobileDateRangePicker.tsx

@@ -163,11 +163,19 @@ function CustomDateRangePickerMobile({
   };
 
   const onBlurStartTime = (e) => {
-    checkAndSetTime(e.target.value, setStartTimeText, setStartTimeError);
+    if (e.target.value !== '') {
+      checkAndSetTime(e.target.value, setStartTimeText, setStartTimeError);
+    } else {
+      setStartTimeError(false);
+    }
   };
 
   const onBlurEndTime = (e) => {
-    checkAndSetTime(e.target.value, setEndTimeText, setEndTimeError);
+    if (e.target.value !== '') {
+      checkAndSetTime(e.target.value, setEndTimeText, setEndTimeError);
+    } else {
+      setEndTimeError(false);
+    }
   };
 
   return (

src/features/claim/components/ticket/QrDetails.tsx

@@ -12,12 +12,14 @@ interface QrDetailsProps {
   eventId: string;
   funderId: string;
   ticketInfoExtra?: TicketMetadataExtra;
+  sellable?: boolean;
 }
 
 export const QrDetails = ({
   qrValue,
   ticketName,
   eventName,
+  sellable,
   eventId,
   funderId,
   ticketInfoExtra,
@@ -55,6 +57,7 @@ export const QrDetails = ({
     img.src = `data:image/svg+xml;base64,${btoa(svgData)}`;
   };
 
+  const isSellable = sellable ?? true;
   return (
     <Flex align="center" flexDir="column" p={{ base: '6', md: '8' }} pt={{ base: '12', md: '16' }}>
       <Box
@@ -77,28 +80,30 @@ export const QrDetails = ({
         <Button variant="outline" w="full" onClick={handleDownloadQrCode}>
           Download QR code
         </Button>
-        <VStack spacing="1" w="full">
-          <Button
-            variant="outline"
-            w="full"
-            onClick={() => {
-              navigate(`/gallery/${funderId}:${eventId}#secretKey=${qrValue}`);
-            }}
-          >
-            Sell Ticket
-          </Button>
-          <Heading
-            fontFamily="body"
-            fontSize={{ base: 'xs', md: 'xs' }}
-            fontWeight="500"
-            textAlign="center"
-          >
-            Can be sold through:
-          </Heading>
-          <Heading fontSize={{ base: 'xs', md: 'xs' }} fontWeight="500" textAlign="center">
-            {ticketInfoExtra && dateAndTimeToText(ticketInfoExtra?.salesValidThrough)}
-          </Heading>
-        </VStack>
+        {isSellable && (
+          <VStack spacing="1" w="full">
+            <Button
+              variant="outline"
+              w="full"
+              onClick={() => {
+                navigate(`/gallery/${funderId}:${eventId}#secretKey=${qrValue}`);
+              }}
+            >
+              Sell Ticket
+            </Button>
+            <Heading
+              fontFamily="body"
+              fontSize={{ base: 'xs', md: 'xs' }}
+              fontWeight="500"
+              textAlign="center"
+            >
+              Can be sold through:
+            </Heading>
+            <Heading fontSize={{ base: 'xs', md: 'xs' }} fontWeight="500" textAlign="center">
+              {ticketInfoExtra && dateAndTimeToText(ticketInfoExtra?.salesValidThrough)}
+            </Heading>
+          </VStack>
+        )}
       </VStack>
     </Flex>
   );

src/features/create-drop/components/ticket/EventCreationStatusModal.tsx

@@ -51,7 +51,7 @@ export const EventCreationStatusModal = ({
             priceByDropId: prevEventData.priceByDropId,
             stripeAccountId: prevEventData.stripeAccountId,
             eventId: prevEventData.eventId,
-            eventName: prevEventData.eventName
+            eventName: prevEventData.eventName,
           };
           response = await fetch(url, {
             method: 'POST',

src/features/create-drop/components/ticket/EventInfoForm.tsx

@@ -1,11 +1,12 @@
-import { Input, HStack, VStack, Show, Hide, Box } from '@chakra-ui/react';
+import { Input, HStack, VStack, Show, Hide, Box, Heading } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 
 import CustomDateRangePicker from '@/components/DateRangePicker/DateRangePicker';
 import { ImageFileInput } from '@/components/ImageFileInput';
 import CustomDateRangePickerMobile from '@/components/DateRangePicker/MobileDateRangePicker';
 import { FormControlComponent } from '@/components/FormControl';
 import { dateAndTimeToText } from '@/features/drop-manager/utils/parseDates';
+import ToggleSwitch from '@/components/ToggleSwitch/ToggleSwitch';
 
 import {
   type TicketDropFormData,
@@ -256,6 +257,18 @@ const EventInfoForm = (props: EventStepFormProps) => {
             }}
           />
         </FormControlComponent>
+        <HStack justifyContent="space-between" mt="4" w="full">
+          <Heading color="gray.800" fontFamily="body" fontSize={{ base: 'sm', md: 'base' }} m="0">
+            Allow ticket resales
+          </Heading>
+          <ToggleSwitch
+            handleToggle={() => {
+              console.log('FORM DATA: ', !formData.sellable);
+              setFormData({ ...formData, sellable: !formData.sellable });
+            }}
+            toggle={formData.sellable}
+          />
+        </HStack>
       </VStack>
       <Hide below="md">
         <VStack align="start" paddingTop={5} w="100%">

src/features/create-drop/components/ticket/helpers.tsx

@@ -107,6 +107,7 @@ export const estimateCosts = async ({
     name: formData.eventName.value,
     dateCreated: Date.now().toString(),
     description: formData.eventDescription.value,
+    sellable: formData.sellable,
     location: formData.eventLocation.value,
     date: formData.date.value,
     artwork: 'bafybeiehk3mzsj2ih4u4fkvmkfrome3kars7xyy3bxh6xfjquws4flglqa',
@@ -211,6 +212,7 @@ export const createPayload = async ({
     dateCreated: Date.now().toString(),
     description: formData.eventDescription.value,
     location: formData.eventLocation.value,
+    sellable: formData.sellable,
     date: formData.date.value,
     artwork: eventArtworkCid,
     questions: formData.questions.map((question) => ({
@@ -280,7 +282,7 @@ export const createPayload = async ({
         token_metadata: ticketNftInfo,
       },
       add_key_allowlist: [KEYPOM_MARKETPLACE_CONTRACT],
-      transfer_key_allowlist: [KEYPOM_MARKETPLACE_CONTRACT],
+      transfer_key_allowlist: formData.sellable ? [KEYPOM_MARKETPLACE_CONTRACT] : [],
     };
     const assetData = [
       {

src/features/create-drop/routes/CreateTicketDropPage.tsx

@@ -66,6 +66,7 @@ export interface TicketDropFormData {
   eventLocation: { value: string; error?: string };
   date: { value: DateAndTimeInfo; error?: string };
   eventArtwork: { value: File | undefined; error?: string };
+  sellable: boolean;
 
   // Step 2
   questions: Array<{ question: string; isRequired: boolean }>;
@@ -146,6 +147,7 @@ const placeholderData: TicketDropFormData = {
   eventArtwork: { value: undefined },
   eventDescription: { value: '' },
   eventLocation: { value: '' },
+  sellable: true,
   date: {
     value: {
       startDate: 0,
@@ -176,7 +178,12 @@ export default function NewTicketDrop() {
   const [eventCreationSuccess, setEventCreationSuccess] = useState<boolean | undefined>();
   const [txnSuccess, setTxnSuccess] = useState(false);
   const [prevEventData, setPrevEventData] = useState<
-    | { priceByDropId?: Record<string, number>; eventId: string; eventName: string; stripeAccountId?: string }
+    | {
+        priceByDropId?: Record<string, number>;
+        eventId: string;
+        eventName: string;
+        stripeAccountId?: string;
+      }
     | undefined
   >();
 
@@ -323,25 +330,26 @@ export default function NewTicketDrop() {
         localStorage.setItem('EVENT_INFO_SUCCESS_DATA', JSON.stringify({ eventId }));
       }
 
-      wallet.signAndSendTransaction({
-        signerId: accountId!,
-        receiverId: KEYPOM_EVENTS_CONTRACT,
-        actions,
-      })
-      .then(() => {
-        setTxnSuccess(true);
-      })
-      .catch((err) => {
-        const error: string = err.toString();
-        const description_string = `Error: ` + error
-        toast({
-          title: 'Event Creation Failed',
-          description: description_string,
-          status: 'error',
-          duration: 5000,
-          isClosable: true,
+      wallet
+        .signAndSendTransaction({
+          signerId: accountId!,
+          receiverId: KEYPOM_EVENTS_CONTRACT,
+          actions,
         })
-      });
+        .then(() => {
+          setTxnSuccess(true);
+        })
+        .catch((err) => {
+          const error: string = err.toString();
+          const description_string = `Error: ` + error;
+          toast({
+            title: 'Event Creation Failed',
+            description: description_string,
+            status: 'error',
+            duration: 5000,
+            isClosable: true,
+          });
+        });
     } else {
       toast({
         title: 'Unable to upload event images',

src/features/drop-manager/utils/parseDates.tsx

@@ -20,6 +20,10 @@ export const dateAndTimeToText = (date: DateAndTimeInfo, placeholder = '') => {
     formattedDate += ` at ${date.startTime}`;
   }
 
+  if (!date.endDate && date.endTime) {
+    formattedDate += ` ends ${date.endTime}`;
+  }
+
   // Only add end date information if it exists
   if (date.endDate) {
     const end = new Date(date.endDate);

src/features/gallery/components/PurchaseModal.tsx

@@ -150,7 +150,7 @@ export const PurchaseModal = ({
         Get Free Ticket
       </Button>
     );
-  } else if (stripeRegistered && signedIn && !currentTicket?.isSecondary ) {
+  } else if (stripeRegistered && signedIn && !currentTicket?.isSecondary) {
     // purchaseType = 2;
     PurchaseButton = (
       <>

src/features/gallery/components/SellModal.tsx

@@ -21,11 +21,7 @@ import { useState } from 'react';
 import { MIN_NEAR_SELL } from '@/constants/common';
 import { type ResaleTicketInfo, type EventInterface } from '@/pages/Event';
 import { useAppContext } from '@/contexts/AppContext';
-import {
-  validateDateAndTime,
-  validateEndDateAndTime,
-  validateStartDateAndTime,
-} from '@/features/scanner/components/helpers';
+import { validateDateAndTime } from '@/features/scanner/components/helpers';
 import { dateAndTimeToText } from '@/features/drop-manager/utils/parseDates';
 import { FormControl } from '@/components/FormControl';
 
@@ -77,11 +73,11 @@ export const SellModal = ({
   console.log('event', event);
 
   // Check if the ticket is valid to sell.
-  const ticketSellStartDateValid = validateStartDateAndTime(saleInfo.salesValidThrough);
-  const ticketSellEndDateValid = validateEndDateAndTime(saleInfo.salesValidThrough);
-  const ticketSellDateValid = validateDateAndTime(saleInfo.salesValidThrough);
+  const ticketSellDateValid: { valid: boolean; message: string } = validateDateAndTime(
+    saleInfo.salesValidThrough,
+  );
 
-  const isSellError = input === '' || !ticketSellDateValid;
+  const isSellError = input === '' || !ticketSellDateValid.valid;
   const nearInput = parseFloat(input);
 
   const [isTicketValidToastOpen, setIsTicketValidToastOpen] = useState(false);
@@ -91,9 +87,7 @@ export const SellModal = ({
     if (!isTicketValidToastOpen) {
       setIsTicketValidToastOpen(true);
       ticketSellNotValidToast({
-        title: ticketSellStartDateValid
-          ? 'Ticket sell date has not started.'
-          : 'Ticket sell date has passed.',
+        title: ticketSellDateValid.message,
         description: `Tickets be can sold during: ${dateAndTimeToText(
           saleInfo.salesValidThrough,
         )}.`,
@@ -108,7 +102,7 @@ export const SellModal = ({
   };
 
   // Display not valid
-  if (!ticketSellDateValid) {
+  if (!ticketSellDateValid.valid) {
     showToast();
   }
 
@@ -219,19 +213,7 @@ export const SellModal = ({
                   </Button>
                 </>
               )}
-              {!ticketSellStartDateValid && (
-                <Text
-                  as="h2"
-                  color="red.400"
-                  fontSize="l"
-                  fontWeight="bold"
-                  my="4px"
-                  textAlign="left"
-                >
-                  Ticket sell date has not started.
-                </Text>
-              )}
-              {!ticketSellEndDateValid && (
+              {!ticketSellDateValid.valid && (
                 <Text
                   as="h2"
                   color="red.400"
@@ -240,7 +222,7 @@ export const SellModal = ({
                   my="4px"
                   textAlign="left"
                 >
-                  Ticket sell date has passed.
+                  {ticketSellDateValid.message}
                 </Text>
               )}
             </VStack>