fix: add checks for ticket type and discount validity on submit, and fixed admin ui columns and registration delete

Author: seangaaab

frontend/src/model/pycon/registrations.ts

@@ -86,7 +86,7 @@ export const mapCreateRegistrationDataForPayment = (registration: RegisterFormVa
   futureVolunteer: registration.futureVolunteer,
   dietaryRestrictions: registration.dietaryRestrictions || null,
   accessibilityNeeds: registration.accessibilityNeeds || null,
-  discountCode: registration.discountCode || null,
+  discountCode: registration.discountPercentage ? registration.validCode || null : null,
   validIdObjectKey: registration.validIdObjectKey
 });
 

frontend/src/pages/admin/event/pycon/registrations/RegistrationsColumns.tsx

@@ -25,14 +25,23 @@ const getEnableHiding = (header: string) => showableHeaders.includes(header);
 
 export const getRegistrationColumns = (): ColumnDef<Registration>[] => {
   const RegistrationColumns: ColumnDef<Registration>[] = [
+    // {
+    //   id: 'select',
+    //   header: ({ table }) => (
+    //     <Checkbox checked={table.getIsAllPageRowsSelected()} onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" />
+    //   ),
+    //   cell: ({ row }) => <Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label="Select row" />,
+    //   enableSorting: false,
+    //   enableHiding: getEnableHiding('select')
+    // },
     {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox checked={table.getIsAllPageRowsSelected()} onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" />
-      ),
-      cell: ({ row }) => <Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label="Select row" />,
-      enableSorting: false,
-      enableHiding: getEnableHiding('select')
+      id: 'actions',
+      header: () => <span>View Regstration</span>,
+      cell: ({ row }) => {
+        const registrationInfo = row.original;
+        return <RegistrationModal registrationInfo={registrationInfo} />;
+      },
+      enableHiding: getEnableHiding('actions')
     },
     {
       accessorKey: 'firstName',
@@ -245,16 +254,6 @@ export const getRegistrationColumns = (): ColumnDef<Registration>[] => {
         );
       },
       enableHiding: getEnableHiding('linkedInLink')
-    },
-
-    {
-      id: 'actions',
-      header: () => <span>Actions</span>,
-      cell: ({ row }) => {
-        const registrationInfo = row.original;
-        return <RegistrationModal registrationInfo={registrationInfo} />;
-      },
-      enableHiding: getEnableHiding('actions')
     }
   ];
 

frontend/src/pages/admin/event/pycon/registrations/useEditRegistrationForm.ts

@@ -104,7 +104,7 @@ export const useEditRegistrationForm = (eventId: string, registrationInfo: Regis
     }
   });
 
-  const onDelete = form.handleSubmit(async () => {
+  const onDelete = async () => {
     try {
       const response = await api.execute(deleteRegistration(eventId, registrationId));
 
@@ -130,7 +130,7 @@ export const useEditRegistrationForm = (eventId: string, registrationInfo: Regis
         description: errorData?.message || 'An error occurred while deleting registration. Please try again.'
       });
     }
-  });
+  };
 
   return {
     form,

frontend/src/pages/client/pycon/hooks/useRegisterForm.ts

@@ -93,6 +93,7 @@ const RegisterFormSchema = z.object({
   discountedPrice: z.number().optional(),
   total: z.number(),
   // ----- //
+  validCode: z.string().optional(),
   agreeToDataUse: z.literal(true, { error: 'Please agree to data use policy to proceed' }),
   agreeToCodeOfConduct: z.literal(true, { error: 'Please agree to our code of conduct to proceed' })
 });
@@ -116,8 +117,10 @@ export const REGISTER_FIELDS: RegisterFieldMap = {
 export const useRegisterForm = (eventId: string, navigateOnSuccess: () => void) => {
   const { successToast, errorToast } = useNotifyToast();
   const api = useApi();
+
   const auth = useCurrentUser();
   const userEmail = auth?.user?.email ?? '';
+
   const [searchParams] = useSearchParams();
   const transactionIdFromUrl = searchParams.get('paymentTransactionId');
 
@@ -161,6 +164,7 @@ export const useRegisterForm = (eventId: string, navigateOnSuccess: () => void)
         amountPaid: 0,
         discountCode: '',
         // ----- //
+        validCode: '',
         transactionId: '',
         paymentMethod: '',
         paymentChannel: '',

frontend/src/pages/client/pycon/register/Register.tsx

@@ -32,7 +32,7 @@ const Register: FC = () => {
   const [eventInfo, setEventInfo] = useState<Event | null>(null);
   const [isFeesLoading, setIsFeesLoading] = useState(false);
 
-  const { response, isPending } = useRegisterPage(eventId!, setCurrentStep);
+  const { response, isPending } = useRegisterPage(eventId!, setCurrentStep, setEventInfo);
   const { form, onSubmit } = useRegisterForm(eventId!, navigateOnSuccess);
   const { isSuccessLoading, isRegisterSuccessful, retryRegister } = useSuccess(currentStep, form.getValues, onSubmit);
 
@@ -48,15 +48,10 @@ const Register: FC = () => {
     return <Skeleton className="w-full h-full" />;
   }
 
-  if (!response || (response && !response.data && response.errorData)) {
+  if (!response || (response && !response.data && response.errorData) || !eventInfo) {
     return <ErrorPage error={response} />;
   }
 
-  if (!eventInfo) {
-    setEventInfo(response.data);
-    return null;
-  }
-
   if (eventInfo.status === 'draft') {
     return <ErrorPage />;
   }

frontend/src/pages/client/pycon/register/footer/useRegisterFooter.ts

@@ -2,14 +2,15 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { ulid } from 'ulid';
-import { getEventRegCountStatus } from '@/api/events';
+import { getDiscount } from '@/api/discounts';
+import { getEvent, getEventRegCountStatus } from '@/api/events';
 import { Event } from '@/model/events';
 import { getPathFromUrl, isEmpty, reloadPage, scrollToView } from '@/utils/functions';
 import { useApi } from '@/hooks/useApi';
 import { useNotifyToast } from '@/hooks/useNotifyToast';
 import { RegisterField, RegisterFormValues } from '../../hooks/useRegisterForm';
 import { calculateTotalPrice } from '../pricing';
-import { RegisterStep, STEP_SUCCESS } from '../steps/RegistrationSteps';
+import { RegisterStep, STEP_PAYMENT, STEP_SUCCESS, STEP_TICKET_SELECTION } from '../steps/RegistrationSteps';
 import { usePayment } from '../usePayment';
 
 export const useRegisterFooter = (
@@ -77,6 +78,7 @@ export const useRegisterFooter = (
         sprintDayPrice: sprintDay && event.sprintDayPrice ? event.sprintDayPrice : 0
       }).toFixed(2)
     );
+
     setValue('total', total);
   };
 
@@ -167,7 +169,7 @@ export const useRegisterFooter = (
       return;
     }
 
-    const total = getValues('total');
+    const [total, selectedTicket, discountCode] = getValues(['total', 'ticketType', 'validCode']);
 
     if (event.isApprovalFlow && event.status === 'preregistration') {
       setCurrentStep(STEP_SUCCESS);
@@ -190,6 +192,56 @@ export const useRegisterFooter = (
       setPaymentTotal();
     }
 
+    if (selectedTicket) {
+      // refetch event to get latest info
+      const event = await api.execute(getEvent(eventId));
+
+      if (!event.data || event.status !== 200) {
+        return;
+      }
+
+      const ticketTypeFromEvent = event.data.ticketTypes?.find((x) => x.id === selectedTicket);
+
+      // return error if ticket type is not found
+      if (!ticketTypeFromEvent) {
+        errorToast({
+          title: 'Ticket type not found',
+          description: 'Your ticket type is invalid. Please select another ticket type.'
+        });
+        setCurrentStep(STEP_TICKET_SELECTION);
+        return;
+      }
+
+      // return error if ticket type is sold out
+      if (ticketTypeFromEvent.maximumQuantity === ticketTypeFromEvent.currentSales) {
+        errorToast({
+          title: 'Ticket type is sold out',
+          description: 'Sorry, but your selected ticket type is already sold out. Please select another ticket type to register.'
+        });
+        setCurrentStep(STEP_TICKET_SELECTION);
+        return;
+      }
+    }
+
+    // recheck discount code
+    if (discountCode) {
+      const response = await api.execute(getDiscount(discountCode, eventId));
+      const discount = response.data;
+
+      const isDiscountUsedUp = discount.maxDiscountUses !== null ? discount.remainingUses === 0 : discount.claimed;
+
+      // return error if discount code is used up
+      if (isDiscountUsedUp) {
+        errorToast({
+          title: 'Discount Code is already used up',
+          description: 'The discount code you entered has already been claimed to its maximum. Please enter a different discount code.'
+        });
+        setValue('validCode', '');
+        setCurrentStep(STEP_PAYMENT);
+        return;
+      }
+    }
+
     try {
       setIsFormSubmitting(true);
       await onRequestPayment();

frontend/src/pages/client/pycon/register/steps/PaymentAndVerificationStep.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 const PaymentAndVerificationStep = ({ event: { eventId, price, platformFee, sprintDayPrice }, isFeesLoading, setIsFeesLoading }: Props) => {
-  const { control, setValue } = useFormContext<RegisterFormValues>();
+  const { control, setValue, getValues } = useFormContext<RegisterFormValues>();
   const [transactionFee, sprintDay] = useWatch({ name: ['transactionFee', 'sprintDay'], control });
   const { discountPercentage, isValidatingDiscountCode, validateDiscountCode } = useDiscount(price);
   const { getTransactionFee } = useTransactionFee(price, platformFee, setIsFeesLoading, discountPercentage, sprintDayPrice);
@@ -44,7 +44,7 @@ const PaymentAndVerificationStep = ({ event: { eventId, price, platformFee, spri
 
   // Recalculate transaction fee when discount changes
   useEffect(() => {
-    const [paymentChannel, paymentMethod] = ['paymentChannel', 'paymentMethod'].map((name) => control._formValues?.[name as keyof RegisterFormValues]);
+    const [paymentChannel, paymentMethod] = getValues(['paymentChannel', 'paymentMethod']);
 
     if (paymentChannel && paymentMethod) {
       getTransactionFee();

frontend/src/pages/client/pycon/register/steps/SummaryStep.tsx

@@ -26,7 +26,7 @@ const SummaryStep = ({ event }: SummaryProps) => {
     linkedInLink,
     ticketTypeId,
     sprintDay,
-    discountCode,
+    validCode,
     discountPercentage,
     transactionFee,
     discountedPrice,
@@ -52,7 +52,7 @@ const SummaryStep = ({ event }: SummaryProps) => {
       'linkedInLink',
       'ticketType',
       'sprintDay',
-      'discountCode',
+      'validCode',
       'discountPercentage',
       'transactionFee',
       'discountedPrice',
@@ -181,11 +181,11 @@ const SummaryStep = ({ event }: SummaryProps) => {
               <span className="font-bold">Price:</span>
               <p>{formatMoney(event.price, 'PHP')}</p>
 
-              {discountPercentage && discountCode && discountedPrice ? (
+              {discountPercentage && validCode && discountedPrice ? (
                 <>
                   <span className="font-bold">Discount Code: </span>
-                  <span className="break-words" title={discountCode}>
-                    {discountCode}
+                  <span className="break-words" title={validCode}>
+                    {validCode}
                   </span>
 
                   <span className="font-bold">Discount</span>

frontend/src/pages/client/pycon/register/steps/TicketSelectionStep.tsx

@@ -1,11 +1,9 @@
 import { FC } from 'react';
 import { Check, Star, Zap, Calendar, Users, Coffee } from 'lucide-react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import Button from '@/components/Button';
 import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/Card';
 import { FormItem, FormLabel, FormError } from '@/components/Form';
-import Label from '@/components/Label';
-import { RadioGroup, RadioGroupItem } from '@/components/RadioGroup';
 import { Event } from '@/model/events';
 import { cn } from '@/utils/classes';
 import { formatMoney, formatPercentage } from '@/utils/functions';
@@ -16,13 +14,13 @@ interface Props {
   updateEventPrice: (newPrice: number) => void;
 }
 
-const shirtSizeOptions = ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'] as const;
+// const shirtSizeOptions = ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'] as const;
 
 const TicketSelectionStep = ({ event, updateEventPrice }: Props) => {
-  const shirtSizeLink = import.meta.env.VITE_COMMDAY_SHIRT_SIZE_LINK;
+  // const shirtSizeLink = import.meta.env.VITE_COMMDAY_SHIRT_SIZE_LINK;
 
   const { control } = useFormContext<RegisterFormValues>();
-  const [availTShirt] = useWatch({ control, name: ['availTShirt'] });
+  // const [availTShirt] = useWatch({ control, name: ['availTShirt'] });
 
   return (
     <>
@@ -150,6 +148,7 @@ interface TicketTypeProps {
 const TicketType: FC<TicketTypeProps> = ({ ticketType, benefits, subtitle, value, backgroundClass, star, updateEventPrice, onChange }) => {
   const isSelected = value === ticketType.id;
   const isKasosyo = ticketType.id === 'kasosyo';
+  const isSoldOut = ticketType.maximumQuantity === ticketType.currentSales;
 
   return (
     <div
@@ -159,16 +158,21 @@ const TicketType: FC<TicketTypeProps> = ({ ticketType, benefits, subtitle, value
         'hover:shadow-xl hover:scale-[1.02] hover:brightness-110',
         isKasosyo ? 'bg-gradient-to-br from-red-500 to-red-600 shadow-red-200/50' : 'bg-gradient-to-br from-orange-400 to-orange-500 shadow-orange-200/50',
         isSelected && 'ring-2 ring-white/10 shadow-lg',
+        isSoldOut && 'grayscale-100 cursor-not-allowed shadow-none hover:scale-none hover:brightness-100 hover:shadow-none select-none',
         backgroundClass
       )}
       onClick={() => {
+        if (isSoldOut) {
+          return;
+        }
+
         onChange(ticketType.id);
         updateEventPrice(ticketType.price);
       }}
     >
       <CardHeader className="pb-4">
         <CardTitle className={cn('flex flex-wrap font-black font-nunito text-2xl items-center gap-x-4 mb-3')}>
-          {star && <Star fill="currentColor" className="animate-pulse" />}
+          {star && <Star fill="currentColor" className={cn(!isSoldOut && 'animate-pulse')} />}
           {ticketType.name.toUpperCase()}
           <span className={cn('font-medium text-base opacity-90')}>{`( ${subtitle} )`}</span>
         </CardTitle>
@@ -201,6 +205,10 @@ const TicketType: FC<TicketTypeProps> = ({ ticketType, benefits, subtitle, value
               : 'bg-pycon-violet-dark/80 hover:bg-pycon-violet-light hover:shadow-xl hover:scale-105 text-white shadow-lg border border-transparent'
           )}
           onClick={(e) => {
+            if (isSoldOut) {
+              return;
+            }
+
             e.stopPropagation();
             onChange(ticketType.id);
             updateEventPrice(ticketType.price);
@@ -315,29 +323,3 @@ const SprintDaySection: FC<SprintDaySectionProps> = ({ isSelected, sprintDayPric
 };
 
 export default TicketSelectionStep;
-
-// <CardHeader>
-//   <CardTitle className={cn('grid font-black font-nunito text-2xl items-center gap-x-4', 'grid-cols-[auto_auto_auto_1fr]')}>
-//     {/* <div className="inline-flex gap-x-2 items-center">
-//     </div> */}
-//     <Star fill="currentColor" className={cn(!star && 'opacity-0')} />
-//     {ticketType.name.toUpperCase()}
-//     <span className={cn('font-medium text-base row-start-2 sm:row-start-1', 'col-start-2 sm:col-start-3')}>{`( ${subtitle} )`}</span>
-
-//     <div
-//       className={cn(
-//         'text-pycon-custard-light font-nunito font-bold text-xl  col-span-2 sm:col-span-1',
-//         'row-start-3 sm:row-start-1 ms-0 sm:col-start-3 sm:ms-auto',
-//         'col-start-2 sm:col-start-4 ms-0 sm:ms-auto'
-//       )}
-//     >
-//       {formatMoney(ticketType.price, 'PHP')}
-//     </div>
-//   </CardTitle>
-//   {ticketType.originalPrice && ticketType.price < ticketType.originalPrice && (
-//     <CardDescription>
-//       <span className="line-through text-gray-500 font-semibold">{formatMoney(ticketType.originalPrice, 'PHP')}</span>
-//       <span className="ml-2 text-green-400 font-semibold">{formatPercentage(1 - ticketType.price / ticketType.originalPrice)} off</span>
-//     </CardDescription>
-//   )}
-// </CardHeader>