Feat/firstdate/event

package.json

@@ -20,6 +20,7 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "astro": "^5.10.1",
+    "canvas-confetti": "^1.9.3",
     "clsx": "^2.1.1",
     "dotenv": "^17.0.1",
     "react": "^19.1.0",

src/components/common/ButtonFd.astro

@@ -52,9 +52,10 @@ export interface Props {
   disabled?: boolean;
   class?: string;
   registrationStatus?: 'registered' | 'not-registered' | null;
-  href: string;
+  href?: string;
   target?: '_blank' | '_self' | '_parent' | '_top';
   rel?: string;
+  id?: string;
 }
 
 const { 
@@ -67,6 +68,7 @@ const {
   href,
   target,
   rel,
+  id,
   ...restProps
 } = Astro.props;
 
@@ -114,44 +116,82 @@ const currentSize = sizeConfig[size];
     </svg>
   </div>
 
-  <a 
-    href={href}
-    target={target}
-    rel={rel}
-    class={cn(
-      'button-main relative flex items-center w-full font-ibm-plex-sans-thai font-normal leading-tight cursor-pointer transition-colors duration-200 ease-in-out border-0 outline-none bg-transparent focus:outline-none overflow-hidden text-decoration-none',
-      currentSize.text,
-      currentSize.padding,
-      disabled && 'opacity-50 pointer-events-none'
-    )}
-    data-variant={variant}
-    aria-disabled={disabled}
-    {...restProps}
-  >
-    <div class={cn('flex items-center w-full relative z-10 overflow-hidden')}>
-      <div class="flex-shrink-0">
-        <slot name="icon" />
-      </div>
-      <div class="flex-1 flex justify-center overflow-hidden">
-        <div class="text-center leading-tight">
-          <slot />
+  {href ? (
+    <a 
+      href={href}
+      target={target}
+      rel={rel}
+      id={id}
+      class={cn(
+        'button-main relative flex items-center w-full font-ibm-plex-sans-thai font-normal leading-tight cursor-pointer transition-colors duration-200 ease-in-out border-0 outline-none bg-transparent focus:outline-none overflow-hidden text-decoration-none',
+        currentSize.text,
+        currentSize.padding,
+        disabled && 'opacity-50 pointer-events-none'
+      )}
+      data-variant={variant}
+      aria-disabled={disabled}
+      {...restProps}
+    >
+      <div class={cn('flex items-center justify-center w-full relative z-10 overflow-hidden')}>
+        <div class="flex items-center justify-center w-full">
+          <slot name="icon" />
+          <div class="flex-1 text-center leading-tight">
+            <slot />
+          </div>
+          {registrationStatus && (
+            <div class="flex items-center justify-center ml-2 flex-shrink-0">
+              {registrationStatus === 'registered' ? (
+                <div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
+                  <Check size={12} color="white" />
+                </div>
+              ) : (
+                <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
+                  <X size={12} color="white" />
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
-      {registrationStatus && (
-        <div class="flex items-center justify-center ml-2 flex-shrink-0">
-          {registrationStatus === 'registered' ? (
-            <div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
-              <Check size={12} color="white" />
-            </div>
-          ) : (
-            <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
-              <X size={12} color="white" />
+    </a>
+  ) : (
+    <button 
+      id={id}
+      type="button"
+      disabled={disabled}
+      class={cn(
+        'button-main relative flex items-center w-full font-ibm-plex-sans-thai font-normal leading-tight cursor-pointer transition-colors duration-200 ease-in-out border-0 outline-none bg-transparent focus:outline-none overflow-hidden',
+        currentSize.text,
+        currentSize.padding,
+        disabled && 'opacity-50 pointer-events-none'
+      )}
+      data-variant={variant}
+      aria-disabled={disabled}
+      {...restProps}
+    >
+      <div class={cn('flex items-center justify-center w-full relative z-10 overflow-hidden')}>
+        <div class="flex items-center justify-center w-full">
+          <slot name="icon" />
+          <div class="flex-1 text-center leading-tight">
+            <slot />
+          </div>
+          {registrationStatus && (
+            <div class="flex items-center justify-center ml-2 flex-shrink-0">
+              {registrationStatus === 'registered' ? (
+                <div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
+                  <Check size={12} color="white" />
+                </div>
+              ) : (
+                <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
+                  <X size={12} color="white" />
+                </div>
+              )}
             </div>
           )}
         </div>
-      )}
-    </div>
-  </a>
+      </div>
+    </button>
+  )}
 </div>
 
 <style>
@@ -196,9 +236,9 @@ const currentSize = sizeConfig[size];
     --hover-text: #FFFFF2;
     --hover-shadow: #121212;
     --disabled-fill: rgba(255, 255, 242, 0.5);
-    --disabled-stroke: rgba(203, 67, 139, 0.5);
+    --disabled-stroke: rgba(255, 255, 242, 0.5);
     --disabled-text: rgba(18, 18, 18, 0.5);
-    --disabled-shadow: rgba(203, 67, 139, 0.5);
+    --disabled-shadow: rgba(255, 255, 242, 0.5);
   }
 
   /* Stroke variant overrides for light-beige */
@@ -210,9 +250,9 @@ const currentSize = sizeConfig[size];
     --hover-stroke: #FFFFF2;
     --hover-text: #121212;
     --hover-shadow: #FFFFF2;
-    --disabled-stroke: rgba(255, 255, 242, 0.2);
-    --disabled-text: rgba(255, 255, 242, 0.2);
-    --disabled-shadow: rgba(255, 255, 242, 0.2);
+    --disabled-stroke: rgba(255, 255, 242, 0.5);
+    --disabled-text: rgba(18, 18, 18, 0.5);
+    --disabled-shadow: rgba(255, 255, 242, 0.5);
   }
 
   .button-container--light-pink {

src/components/common/SuccessConfetti.astro

@@ -0,0 +1,130 @@
+---
+import type { EventConfig } from '@/lib/eventAPI';
+
+interface Props {
+  eventName: string;
+  eventId?: string;
+  eventConfig: EventConfig;
+}
+
+const { eventName, eventId, eventConfig } = Astro.props;
+import Popup from './Popup.astro';
+---
+<section class="flex flex-col items-center justify-center">
+        <Popup
+        size="medium"   
+        color="light-green"                                     
+        class="flex flex-col items-center justify-center text-center"
+      >        
+        <p>{eventConfig.description}</p>
+        <p class="mt-4">{eventConfig.schedule}</p>
+        <p>{eventConfig.registrationInfo}</p>
+        <p>{eventConfig.additionalInfo}</p>
+        <p class="mt-4 text-[#C6EBC5] font-bold">ลงทะเบียนสำเร็จ!</p>        
+      </Popup>       
+      <h1 class="text-4xl text-white text-center font-bold fill-white drop-shadow-lg drop-shadow-white/50 mb-8">กำลังโหลด</h1>      
+</section>
+
+<script>
+  import confetti from 'canvas-confetti';
+
+  // Function to create custom confetti with background positioning
+  function createConfetti() {
+    // Create a canvas element and position it behind content
+    const canvas = document.createElement('canvas');
+    canvas.style.position = 'fixed';
+    canvas.style.top = '0';
+    canvas.style.left = '50%';
+    canvas.style.transform = 'translateX(-50%)';
+    canvas.style.width = '440px'; // Match your max-width
+    canvas.style.maxWidth = '100vw'; // Responsive fallback
+    canvas.style.height = '100vh';
+    canvas.style.zIndex = '1'; // In front of background, behind content
+    canvas.style.pointerEvents = 'none';
+    document.body.appendChild(canvas);
+
+    // Create confetti instance on our custom canvas
+    const myConfetti = confetti.create(canvas, {
+      resize: true,
+      useWorker: true
+    });
+
+    const duration = 3000; // 3 seconds
+    const end = Date.now() + duration;
+    const colors = ['#f43f5e', '#10b981', '#3b82f6', '#8b5cf6', '#f59e0b', '#ef4444', '#06b6d4', '#84cc16'];
+
+    // Function for continuous confetti
+    const frame = () => {
+      // Left side confetti
+      myConfetti({
+        particleCount: 3,
+        angle: 60,
+        spread: 45,
+        origin: { x: 0, y: 0.6 },
+        colors: colors,
+        gravity: 0.8,
+        drift: 1,
+        scalar: 1.0
+      });
+
+      // Right side confetti  
+      myConfetti({
+        particleCount: 3,
+        angle: 120,
+        spread: 45,
+        origin: { x: 1, y: 0.6 },
+        colors: colors,
+        gravity: 0.8,
+        drift: -1,
+        scalar: 1.0
+      });
+
+      // Center top confetti
+      myConfetti({
+        particleCount: 4,
+        angle: 90,
+        spread: 50,
+        origin: { x: 0.5, y: 0.1 },
+        colors: colors,
+        gravity: 0.9,
+        drift: 0,
+        scalar: 1.0
+      });
+
+      if (Date.now() < end) {
+        requestAnimationFrame(frame);
+      }
+    };
+
+    frame();
+
+    // Clean up canvas after confetti is done
+    setTimeout(() => {
+      setTimeout(() => {
+        if (canvas && canvas.parentNode) {
+          canvas.parentNode.removeChild(canvas);
+        }
+      }, 3000); // Wait 3 more seconds for particles to clear
+    }, duration);
+  }
+
+  // Auto-start confetti when component loads
+  createConfetti();
+
+  // Auto-redirect after confetti and display time
+  setTimeout(() => {
+    // Get eventId from the URL or use passed prop
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentPath = window.location.pathname;
+    const eventIdMatch = currentPath.match(/\/events\/([^\/]+)\//);
+    const eventId = eventIdMatch ? eventIdMatch[1] : null;
+
+    if (eventId) {
+      // Redirect back to event page to show "already registered" state
+      window.location.href = `/firstdate/events/${eventId}/`;
+    } else {
+      // Fallback to home page
+      window.location.href = '/firstdate/home/';
+    }
+  }, 4000); // Redirect after 4 seconds (total display time)
+</script>