Checkout fix (#27)

* fix firebase-admin error due to dpulicate-app.
Fix Markdown not sanitizing in checkout page.
Add required * for required inputs.
Fix summary only putting ... if truncated

* refactor, remove unused code

* fix Date and Time

* fix dialog

* Update button to include spinner when loading

* fix lint and check errors

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "firebase": "^10.4.0",
     "firebase-admin": "^11.11.0",
+    "lodash": "^4.17.21",
     "luxon": "^3.4.1",
     "svelte-french-toast": "^1.2.0",
     "tailwind-merge": "^1.14.0"
@@ -31,6 +32,7 @@
     "@tanstack/svelte-table": "^8.10.7",
     "@ts-stack/markdown": "^1.4.0",
     "@types/file-saver": "^2.0.5",
+    "@types/lodash": "^4.14.199",
     "@types/luxon": "^3.3.1",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",

src/lib/components/AdminTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import DataTable, {Head, Body, Row, Cell} from '@smui/data-table'
   import {activeTickets, cancelledTickets} from '$lib/store'
-  import exportExcel from '$lib/exportExcel'
+  // import exportExcel from '$lib/exportExcel'
 
   let initBodyHtml: string | null = null
 
@@ -32,8 +32,8 @@
     Print
   </button>
   <button
-    class="absolute top-0 right-44 m-7 bg-amber-300/75 hover:bg-amber-400 text-white font-bold py-2 px-4 rounded-lg"
-    on:click={() => exportExcel(null, 'data.csv')}>
+    class="absolute top-0 right-44 m-7 bg-amber-300/75 hover:bg-amber-400 text-white font-bold py-2 px-4 rounded-lg">
+    <!-- on:click={() => exportExcel(null, 'data.csv')} -->
     CSV
   </button>
   <DataTable stickyHeader aria-label="Ticket List" class="w-[180%] overflow-auto" id="print-area">

src/lib/components/Button.svelte

@@ -2,6 +2,7 @@
   import {clsx} from 'clsx'
   export let disabled = false
   export let size: 'sm' | 'md' | 'lg' | 'xl' = 'md'
+  export let loading = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -20,5 +21,20 @@
       : 'bg-radicalRed-500 text-white transition-colors hover:bg-radicalRed-600',
     $$restProps.class
   )}>
+  {#if loading}
+    <svg
+      class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+      ></circle>
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  {/if}
   <slot />
 </svelte:element>

src/lib/server/firebaseAdmin.ts

@@ -7,9 +7,11 @@ const serviceAccount = {
   privateKey: env.FIREABSE_ADMIN_PRIVATE_KEY,
 } as ServiceAccount
 
-const app = admin.initializeApp({
-  credential: admin.credential.cert(serviceAccount),
-  databaseURL: 'https://vancouver-kdd-default-rtdb.firebaseio.com',
-})
+const app =
+  admin.apps[0] ??
+  admin.initializeApp({
+    credential: admin.credential.cert(serviceAccount),
+    databaseURL: 'https://vancouver-kdd-default-rtdb.firebaseio.com',
+  })
 
 export const db = app.firestore()

src/routes/admin/+page.svelte

@@ -17,7 +17,7 @@
       .catch((error) => {
         const errorCode = error.code
         const errorMessage = error.message
-        console.log(errorCode, errorMessage)
+        console.error(errorCode, errorMessage)
       })
   }
 </script>

src/routes/admin/dashboard/+page.svelte

@@ -17,7 +17,7 @@
         goto('/admin')
       })
       .catch((error) => {
-        console.log(error)
+        console.error(error)
       })
   }
 

src/routes/admin/register/+page.svelte

@@ -7,7 +7,7 @@
   let email: string
   let password: string
 
-  let success: boolean | undefined = undefined
+  // let success: boolean | undefined = undefined
 
   const register = () => {
     createUserWithEmailAndPassword(firebaseAuth, email, password)
@@ -18,10 +18,8 @@
       .catch((error) => {
         const errorCode = error.code
         const errorMessage = error.message
-        console.log(errorCode, errorMessage)
-
-        success = false
-        console.log(success)
+        console.error(errorCode, errorMessage)
+        // success = false
       })
   }
 </script>

src/routes/checkout/[eventId]/+page.server.ts

@@ -6,19 +6,15 @@ import {error, redirect} from '@sveltejs/kit'
 export const load = async ({params}) => {
   const eventId = params.eventId
 
-  console.log({eventId})
   if (eventId) {
     const data = await getEvent(eventId)
-    console.log('data', data)
     return {event: data}
   }
   return {event: null}
 }
 
 export const actions = {
   default: async ({request}) => {
-    console.log('checkout page.server.ts is this cached? ' + new Date().valueOf())
-
     const formData = await request.formData()
     const eventId = formData.get('eventId') as string
     if (!eventId) {