src/routes/private/creator/+page.svelte

@@ -7,15 +7,14 @@
 
   let { data, form } = $props();
 
-  let new_event = $state({});
+  let event = $state({});
   let participants = $state([]);
-  let subject = $state('');
-  let body = $state('');
+  let email = $state({'body': '', 'subject': ''});
   let authorized = $state(false);
 
   $effect(() => {
     if (form && form.new_event) {
-      new_event = form.new_event;
+      event = form.new_event;
     }
     if (form && form.participants) {
       participants = form.participants;
@@ -33,12 +32,20 @@
 
   let step: number = $state(0);
 
-  let stepConditions = $derived([
-    authorized,
-    !!new_event?.name,
-    !!participants?.length,
-    !!subject && !!body
-  ]);
+  // let stepConditions = $derived([
+  //   authorized,
+  //   !!new_event?.name,
+  //   !!participants?.length,
+  //   !!subject && !!body
+  // ]);
+
+  // for debugging purpouses
+  let stepConditions = [
+    true,
+    true,
+    true,
+    true
+  ];
 
   function nextStep() {
     if (step < steps.length - 1) step += 1;
@@ -71,17 +78,17 @@
 {#if step == 0}
   <StepConnectGoogle bind:authorized />
 {:else if step == 1}
-  <StepCreateEvent events={data.events} {new_event} />
+  <StepCreateEvent {event} />
 {:else if step == 2}
   <StepUploadFiles {participants} />
 {:else if step == 3}
-  <StepCraftEmail bind:subject bind:body />
+  <StepCraftEmail bind:email />
 {:else if step == 4}
   <StepOverview
-    {new_event}
+    {data}
+    {event}
     {participants}
-    {subject}
-    {body}
+    {email}
     {stepConditions}
   />
 {/if}

src/routes/private/creator/steps/StepCraftEmail.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  export let subject: string;
-  export let body: string;
+  export let email: { subject: string, body: string } = { subject: '', body: '' };
 </script>
 
 <form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
@@ -9,7 +8,7 @@
     Subject
     <input
       type="text"
-      bind:value={subject}
+      bind:value={email.subject}
       class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
       required
     />
@@ -17,7 +16,7 @@
   <label class="flex flex-col text-gray-700">
     Body
     <textarea
-      bind:value={body}
+      bind:value={email.body}
       class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
       rows="6"
       required

src/routes/private/creator/steps/StepCreateEvent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 
-	let { events, new_event } = $props();
+	let { event } = $props();
 	let loading = $state(false);
 
 	function handleEnhance() {
@@ -52,7 +52,7 @@
   </button>
 </form>
 
-{#if Object.keys(new_event).length === 0}
+{#if Object.keys(event).length === 0}
   <div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
     {#if loading}
       <strong>Loading...</strong>
@@ -63,9 +63,9 @@
 {:else}
   <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
     <ol>
-      <li><strong>{new_event.name}</strong></li>
-      <li>{new_event.date}</li>
-      <li>{new_event.description}</li>
+      <li><strong>{event.name}</strong></li>
+      <li>{event.date}</li>
+      <li>{event.description}</li>
     </ol>
   </div>
 {/if}

src/routes/private/creator/steps/StepFinal.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import QRCode from 'qrcode';
+
+	const StepState = {
+		Waiting: 'waiting',
+		Processing: 'processing',
+		FinishedSuccess: 'finished_success',
+		FinishedFail: 'finished_fail'
+	};
+
+	let qr_codes_state = $state(StepState.Processing);
+	let emails_state = $state(StepState.FinishedSuccess);
+
+	// Inserts all participants into the database and returns their assigned IDs.
+	async function insert_data_supabase(data, participants, new_event) {
+		const names = participants.map((p) => p.name);
+		const surnames = participants.map((p) => p.surname);
+		const emails = participants.map((p) => p.email);
+		const {
+			data: { user },
+			error: authError
+		} = await data.supabase.auth.getUser();
+		const { data: user_profile, error: profileError } = await data.supabase
+			.from('profiles')
+			.select('*, section:sections (id, name)')
+			.eq('id', user?.id)
+			.single();
+		const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
+			p_section_id: user_profile?.section.id,
+			p_event_id: new_event.id,
+			p_names: names,
+			p_surnames: surnames,
+			p_emails: emails
+		});
+
+		return { result };
+	}
+
+    // Creates a base64 interpretation of the ticket ID
+	function createB64QRCode(data) {
+		QRCode.toDataURL('I am a pony!')
+            .then((url) => {
+                const parts = url.split(',');
+                return { base64data: parts[1] };
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}
+
+    function sendEmail(email, subject, body, qr_code_base64) {
+        // Here you would implement the logic to send the email.
+        // This is a placeholder function.
+        console.log(`Sending email to ${email} with subject "${subject}" and body "${body}"`);
+        console.log(`QR Code Base64: ${qr_code_base64}`);
+    }
+</script>
+
+Pl