From f7ac12bf76291c9bf737cbe898ca03b1c33a3bf6 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 14 Sep 2025 18:50:34 +0200
Subject: [PATCH] Enhance CreateEventDialog with dynamic currency selection and
 improved validation

- Integrated currency selection using a dropdown, replacing the static input field for currency.
- Removed the wallet input field, now auto-selecting the preferred wallet for event creation.
- Updated form validation to remove the wallet and closing date fields, ensuring ticket sales close when the event ends.
- Added functionality to load available currencies from the EventsApiService when the dialog opens, improving user experience.

These changes streamline the event creation process and enhance the overall usability of the CreateEventDialog component.
---
 .../events/components/CreateEventDialog.vue   | 129 +++++++++++-------
 src/modules/events/services/events-api.ts     |  31 +++++
 src/modules/market/services/nostrmarketAPI.ts |   2 +-
 3 files changed, 112 insertions(+), 50 deletions(-)

diff --git a/src/modules/events/components/CreateEventDialog.vue b/src/modules/events/components/CreateEventDialog.vue
index f658b9c..a32bd2e 100644
--- a/src/modules/events/components/CreateEventDialog.vue
+++ b/src/modules/events/components/CreateEventDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -22,8 +22,17 @@ import {
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Calendar, Loader2 } from 'lucide-vue-next'
 import { toastService } from '@/core/services/ToastService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import { EVENTS_API_TOKEN } from '../composables/useEvents'
 import type { CreateEventRequest } from '../types/event'
 
 // Props
@@ -38,25 +47,23 @@ const emit = defineEmits<{
   'event-created': []
 }>()
 
-// Form validation schema
+// Form validation schema (removed wallet field - will be auto-selected)
+// Note: Ticket sales will automatically close when the event ends
 const formSchema = toTypedSchema(z.object({
-  wallet: z.string().min(1, "Wallet ID is required"),
   name: z.string().min(1, "Event name is required").max(200, "Name too long"),
   info: z.string().min(1, "Event description is required").max(2000, "Description too long"),
-  closing_date: z.string().min(1, "Ticket sale closing date is required"),
   event_start_date: z.string().min(1, "Event start date is required"),
   event_end_date: z.string().min(1, "Event end date is required"),
-  currency: z.string().default("sat"),
+  currency: z.string().default("sats"),
   amount_tickets: z.number().min(1, "Must have at least 1 ticket").max(100000, "Too many tickets"),
   price_per_ticket: z.number().min(0, "Price must be 0 or higher"),
   banner: z.string().optional(),
 }).refine((data) => {
-  const closingDate = new Date(data.closing_date)
   const startDate = new Date(data.event_start_date)
   const endDate = new Date(data.event_end_date)
-  return closingDate <= startDate && startDate <= endDate
+  return startDate <= endDate
 }, {
-  message: "Dates must be in order: closing ≤ start ≤ end",
+  message: "Event start date must be before or equal to end date",
   path: ["event_end_date"]
 }))
 
@@ -64,19 +71,42 @@ const formSchema = toTypedSchema(z.object({
 const form = useForm({
   validationSchema: formSchema,
   initialValues: {
-    wallet: '',
     name: '',
     info: '',
-    closing_date: '',
     event_start_date: '',
     event_end_date: '',
-    currency: 'sat',
+    currency: 'sats',
     amount_tickets: 100,
     price_per_ticket: 1000,
     banner: ''
   }
 })
 
+// Get PaymentService for wallet selection
+const paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE)
+
+// Get EventsApiService for currency loading
+const eventsApi = injectService(EVENTS_API_TOKEN)
+
+// Load available currencies
+const availableCurrencies = ref<string[]>(['sats'])
+const loadingCurrencies = ref(false)
+
+// Load currencies when dialog opens
+watch(() => props.open, async (isOpen) => {
+  if (isOpen && eventsApi && !loadingCurrencies.value) {
+    loadingCurrencies.value = true
+    try {
+      availableCurrencies.value = await eventsApi.getCurrencies()
+    } catch (error) {
+      console.warn('Failed to load currencies:', error)
+      // Keep default currencies
+    } finally {
+      loadingCurrencies.value = false
+    }
+  }
+})
+
 const { resetForm, values, meta } = form
 const isFormValid = computed(() => meta.value.valid)
 const isLoading = ref(false)
@@ -88,9 +118,27 @@ const today = computed(() => format(new Date(), 'yyyy-MM-dd'))
 const onSubmit = form.handleSubmit(async (formValues) => {
   if (!isFormValid.value) return
   
+  if (!paymentService) {
+    toastService.error('Payment service not available')
+    return
+  }
+
+  const preferredWallet = paymentService.getPreferredWallet()
+  if (!preferredWallet) {
+    toastService.error('No wallet available. Please connect a wallet first.')
+    return
+  }
+  
   isLoading.value = true
   try {
-    await props.onCreateEvent(formValues as CreateEventRequest)
+    // Add the selected wallet ID and set closing_date to event_end_date
+    const eventData: CreateEventRequest = {
+      ...formValues,
+      wallet: preferredWallet.id,
+      closing_date: formValues.event_end_date // Ticket sales close when event ends
+    }
+    
+    await props.onCreateEvent(eventData)
     toastService.success('Event created successfully!')
     resetForm()
     emit('update:open', false)
@@ -126,21 +174,6 @@ const handleOpenChange = (open: boolean) => {
       </DialogHeader>
 
       <form @submit="onSubmit" class="space-y-6 mt-4">
-        <!-- Wallet ID -->
-        <FormField v-slot="{ componentField }" name="wallet">
-          <FormItem>
-            <FormLabel>Wallet ID *</FormLabel>
-            <FormControl>
-              <Input 
-                placeholder="Enter your LNbits wallet ID"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormDescription>Your LNbits wallet ID (admin key required)</FormDescription>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
         <!-- Event Name -->
         <FormField v-slot="{ componentField }" name="name">
           <FormItem>
@@ -172,22 +205,7 @@ const handleOpenChange = (open: boolean) => {
         </FormField>
 
         <!-- Date Fields -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <FormField v-slot="{ componentField }" name="closing_date">
-            <FormItem>
-              <FormLabel>Ticket Sales Close *</FormLabel>
-              <FormControl>
-                <Input 
-                  type="date"
-                  :min="today"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormDescription>When ticket sales end</FormDescription>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <FormField v-slot="{ componentField }" name="event_start_date">
             <FormItem>
               <FormLabel>Event Starts *</FormLabel>
@@ -255,12 +273,25 @@ const handleOpenChange = (open: boolean) => {
             <FormItem>
               <FormLabel>Currency</FormLabel>
               <FormControl>
-                <Input 
-                  placeholder="sat"
-                  v-bind="componentField"
-                />
+                <Select v-bind="componentField">
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select currency" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem
+                      v-for="currency in availableCurrencies"
+                      :key="currency"
+                      :value="currency"
+                    >
+                      {{ currency }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
               </FormControl>
-              <FormDescription>Default: sat</FormDescription>
+              <FormDescription>
+                <span v-if="loadingCurrencies">Loading currencies...</span>
+                <span v-else>Currency for ticket pricing</span>
+              </FormDescription>
               <FormMessage />
             </FormItem>
           </FormField>
@@ -303,4 +334,4 @@ const handleOpenChange = (open: boolean) => {
       </form>
     </DialogContent>
   </Dialog>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/events/services/events-api.ts b/src/modules/events/services/events-api.ts
index 25722f8..6aa9d2b 100644
--- a/src/modules/events/services/events-api.ts
+++ b/src/modules/events/services/events-api.ts
@@ -182,4 +182,35 @@ export class EventsApiService {
       throw error
     }
   }
+
+  async getCurrencies(): Promise<string[]> {
+    try {
+      const response = await fetch(
+        `${this.config.baseUrl}/api/v1/currencies`,
+        {
+          headers: {
+            'accept': 'application/json',
+          },
+        }
+      )
+
+      if (!response.ok) {
+        // If API call fails, return default currencies
+        console.warn('Failed to fetch currencies from API, using defaults')
+        return ['sats']
+      }
+
+      const apiCurrencies = await response.json()
+      
+      // Combine 'sats' with API currencies, following the pattern from market API
+      if (Array.isArray(apiCurrencies)) {
+        return ['sats', ...apiCurrencies.filter((currency: string) => currency !== 'sats')]
+      }
+
+      return ['sats']
+    } catch (error) {
+      console.error('Error fetching currencies:', error)
+      return ['sats']
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/modules/market/services/nostrmarketAPI.ts b/src/modules/market/services/nostrmarketAPI.ts
index 7ba371e..3d34f32 100644
--- a/src/modules/market/services/nostrmarketAPI.ts
+++ b/src/modules/market/services/nostrmarketAPI.ts
@@ -331,7 +331,7 @@ export class NostrmarketAPI extends BaseService {
    * Get available currencies
    */
   async getCurrencies(): Promise<string[]> {
-    const baseCurrencies = ['sat']
+    const baseCurrencies = ['sats']
     
     try {
       const apiCurrencies = await this.request<string[]>(