Merge pull request #63 from UoaWDCC/chris-fixes

chore: white background for sponsor logo

Author: niccholasw

src/app/(frontend)/sponsors/page.tsx

@@ -23,6 +23,7 @@ export default async function SponsorsPage() {
               alt="Bear"
               width={450}
               height={450}
+              quality={50}
               className="object-contain"
             />
           </div>

src/app/api/users/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+import { createClient } from '@/utils/supabase/server'
+
+export async function POST(req: NextRequest) {
+  try {
+    const {
+      email,
+      firstName,
+      lastName,
+      phoneNumber,
+      gender,
+      ethnicity,
+      universityId,
+      upi,
+      areaOfStudy,
+      yearLevel,
+    } = await req.json()
+    const supabase = await createClient()
+
+    const { data, error } = await supabase.from('users').insert([
+      {
+        email,
+        first_name: firstName,
+        last_name: lastName,
+        phone_number: phoneNumber,
+        gender,
+        ethnicity,
+        university_id: universityId,
+        upi,
+        area_of_study: areaOfStudy,
+        year_level: yearLevel,
+      },
+    ])
+
+    if (error) throw error
+
+    return NextResponse.json({ success: true, user: data[0] })
+  } catch (err) {
+    console.error('Error creating user:', err)
+    return NextResponse.json({ success: false, error: 'Failed to create user' }, { status: 500 })
+  }
+}

src/components/EventsCarousel.tsx

@@ -149,92 +149,6 @@ const EventsCarousel: React.FC<EventsCarouselProps> = ({
       )}
     </div>
   )
-
-  return (
-    <div className={`relative w-full ${className}`}>
-      {/* Main Image Container */}
-      <div className="relative h-96 overflow-hidden rounded-lg bg-gray-100">
-        {images.map((image, index) => (
-          <div
-            key={image.id}
-            className={`absolute inset-0 transition-transform duration-500 ease-in-out ${
-              index === currentIndex
-                ? 'translate-x-0'
-                : index < currentIndex
-                  ? '-translate-x-full'
-                  : 'translate-x-full'
-            }`}
-          >
-            <Image
-              src={image.src}
-              alt={image.alt}
-              fill
-              className="object-cover"
-              priority={index === 0}
-            />
-
-            {/* Image Overlay with Title and Description */}
-            {(image.title || image.description) && (
-              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
-                {image.title && (
-                  <h3 className="text-white text-xl font-bold mb-2">{image.title}</h3>
-                )}
-                {image.description && <p className="text-white/90 text-sm">{image.description}</p>}
-              </div>
-            )}
-          </div>
-        ))}
-
-        {/* Navigation Arrows */}
-        {images.length > 1 && (
-          <>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/20 hover:bg-black/40 text-white border-0 rounded-full h-12 w-12"
-              onClick={goToPrevious}
-              aria-label="Previous image"
-            >
-              <ChevronLeft className="h-6 w-6" />
-            </Button>
-
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/20 hover:bg-black/40 text-white border-0 rounded-full h-12 w-12"
-              onClick={goToNext}
-              aria-label="Next image"
-            >
-              <ChevronRight className="h-6 w-6" />
-            </Button>
-          </>
-        )}
-      </div>
-
-      {/* Progress Dots */}
-      {images.length > 1 && (
-        <div className="flex justify-center space-x-2 mt-4">
-          {images.map((_, index) => (
-            <button
-              key={index}
-              className={`w-3 h-3 rounded-full transition-all duration-300 ${
-                index === currentIndex ? 'bg-tansa-blue scale-110' : 'bg-gray-300 hover:bg-gray-400'
-              }`}
-              onClick={() => goToSlide(index)}
-              aria-label={`Go to slide ${index + 1}`}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Image Counter */}
-      {images.length > 1 && (
-        <div className="absolute top-4 right-4 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
-          {currentIndex + 1} / {images.length}
-        </div>
-      )}
-    </div>
-  )
 }
 
 export default EventsCarousel

src/components/SponsorsList.tsx

@@ -40,20 +40,25 @@ export default function SponsorsList({ sponsors }: SponsorsListProps) {
             const imageAlt = name || 'Sponsor Logo'
 
             const imageElement = (
-              <div className="relative group w-full flex justify-center items-center select-none">
-                <Image src={imageSrc} alt={imageAlt} width={200} height={200} className="rounded" />
-
+              <div className="relative group bg-white rounded-lg shadow-sm flex items-center justify-center w-[100px] h-[100px]">
+                <Image
+                  src={imageSrc}
+                  alt={imageAlt}
+                  width={100}
+                  height={100}
+                  className="object-contain max-w-[80px] max-h-[80px]"
+                />
+            
                 {/* Hover popup */}
                 {sponsorshipDetails && (
                   <div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-3 w-60 bg-white text-black p-3 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-center text-sm z-10 select-none pointer-events-none group-hover:pointer-events-auto">
                     <h3 className="font-bold mb-1">{name}</h3>
                     <p>{sponsorshipDetails}</p>
                   </div>
                 )}
-
-                {/* Optional semi-transparent overlay on hover */}
               </div>
             )
+            
 
             return (
               <div key={id} className="flex flex-col items-center justify-center w-full max-w-25">

src/components/registration-form/RegistrationForm.tsx

@@ -177,14 +177,12 @@ function CheckoutForm({ clientSecret }: { clientSecret: string }) {
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault()
 
-    if (!stripe || !elements) {
-      return
-    }
+    if (!stripe || !elements) return
 
     setIsLoading(true)
     setMessage('')
 
-    const { error } = await stripe.confirmPayment({
+    const { error, paymentIntent } = await stripe.confirmPayment({
       elements,
       confirmParams: {
         return_url: `${window.location.origin}/success`,
@@ -193,10 +191,38 @@ function CheckoutForm({ clientSecret }: { clientSecret: string }) {
     })
 
     if (error) {
-      if (error.type === 'card_error' || error.type === 'validation_error') {
-        setMessage(error.message || 'An error occurred')
-      } else {
-        setMessage('An unexpected error occurred.')
+      setMessage(error.message || 'An unexpected error occurred.')
+      setIsLoading(false)
+      return
+    }
+
+    if (paymentIntent?.status === 'succeeded') {
+      // Payment successful — create user
+      try {
+        const res = await fetch('/api/users', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            email,
+            firstName,
+            lastName,
+            phoneNumber,
+            gender,
+            ethnicity,
+            universityId,
+            upi,
+            areaOfStudy,
+            yearLevel,
+          }),
+        })
+        const data = await res.json()
+        if (!data.success) {
+          console.error('User creation failed:', data.error)
+        } else {
+          console.log('User created successfully:', data.user)
+        }
+      } catch (err) {
+        console.error('Error creating user:', err)
       }
     }