فهرست منبع

Implements artist premium trial request form

Implements the artist premium trial request form by:
- Refactors structure types and legal statuses into constants with labels.
- Updates the form to submit data to the configured API endpoint.
- Adds basic error handling and success messaging.
- Fixes a typo in the legal representative checkbox label.
Olivier Massot 6 ماه پیش
والد
کامیت
bfd23285a7
4فایلهای تغییر یافته به همراه121 افزوده شده و 27 حذف شده
  1. 40 27
      pages/shop/try/artist-premium.vue
  2. 2 0
      types/enum/enums.ts
  3. 21 0
      types/interface.d.ts
  4. 58 0
      types/types.ts

+ 40 - 27
pages/shop/try/artist-premium.vue

@@ -156,6 +156,8 @@
                       :rules="[validateRequired]"
                       :rules="[validateRequired]"
                       label="Type de la structure*"
                       label="Type de la structure*"
                       :items="structureTypes"
                       :items="structureTypes"
+                      item-value="value"
+                      item-title="title"
                       required
                       required
                     />
                     />
                   </v-col>
                   </v-col>
@@ -165,11 +167,15 @@
                       :rules="[validateRequired]"
                       :rules="[validateRequired]"
                       label="Statut juridique*"
                       label="Statut juridique*"
                       :items="legalStatuses"
                       :items="legalStatuses"
+                      item-value="value"
+                      item-title="title"
                       required
                       required
                     />
                     />
                   </v-col>
                   </v-col>
                 </v-row>
                 </v-row>
 
 
+
+
                 <h2 class="section-title">Représentée par</h2>
                 <h2 class="section-title">Représentée par</h2>
 
 
                 <!-- Representative function -->
                 <!-- Representative function -->
@@ -241,7 +247,7 @@
                 <v-checkbox
                 <v-checkbox
                   v-model="trialRequest.legalRepresentative"
                   v-model="trialRequest.legalRepresentative"
                   :rules="[validateCheckbox]"
                   :rules="[validateCheckbox]"
-                  label="J'agis en tant que représentant légal de l'association.*"
+                  label="J'agis en tant que représentant légal de l'association ou de la structure.*"
                   required
                   required
                 />
                 />
 
 
@@ -337,32 +343,24 @@
 import { useRouter } from 'vue-router'
 import { useRouter } from 'vue-router'
 import type { Ref } from 'vue'
 import type { Ref } from 'vue'
 import { reactive } from 'vue'
 import { reactive } from 'vue'
+import { useRuntimeConfig } from '#app'
 import type { TrialRequest } from '~/types/interface'
 import type { TrialRequest } from '~/types/interface'
+import { STRUCTURE_TYPE, LEGAL_STATUS } from '~/types/types'
 
 
 const router = useRouter()
 const router = useRouter()
 
 
 const form: Ref<HTMLElement | null> = ref(null)
 const form: Ref<HTMLElement | null> = ref(null)
 
 
 // Structure types and legal statuses
 // Structure types and legal statuses
-const structureTypes: Array<string> = [
-  'Orchestre',
-  'Chorale',
-  'Compagnie de théâtre',
-  'Compagnie de danse',
-  'Compagnie de cirque',
-  'Autre',
-]
-
-const legalStatuses: Array<string> = [
-  'Association loi 1901',
-  'SARL',
-  'SAS',
-  'EURL',
-  'Auto-entrepreneur',
-  'Établissement public',
-  'Collectivité territoriale',
-  'Autre',
-]
+const structureTypes = Object.values(STRUCTURE_TYPE).map((item) => ({
+  value: item.key,
+  title: item.label,
+})).sort((a, b) => (a.title > b.title ? 1 : -1))
+
+const legalStatuses = Object.values(LEGAL_STATUS).map((item) => ({
+  value: item.key,
+  title: item.label,
+})).sort((a, b) => (a.title > b.title ? 1 : -1))
 
 
 // Trial request data
 // Trial request data
 const trialRequest = reactive<TrialRequest>({
 const trialRequest = reactive<TrialRequest>({
@@ -372,8 +370,8 @@ const trialRequest = reactive<TrialRequest>({
   postalCode: '',
   postalCode: '',
   city: '',
   city: '',
   structureEmail: '',
   structureEmail: '',
-  structureType: '',
-  legalStatus: '',
+  structureType: 'ARTISTIC_PRACTICE_ONLY',
+  legalStatus: 'ASSOCIATION_LAW_1901',
   siren: '',
   siren: '',
   representativeFirstName: '',
   representativeFirstName: '',
   representativeLastName: '',
   representativeLastName: '',
@@ -418,12 +416,26 @@ const submit = async (): Promise<void> => {
   }
   }
 
 
   try {
   try {
-    // Here you would normally send the data to your backend
-    // For now, we'll just simulate a successful submission
-    console.log('Trial request submitted:', trialRequest)
+    const config = useRuntimeConfig()
+    const apiUrl = `${config.public.apiBaseUrl}/trial/artists_premium`
+
+    console.log('Sending trial request to:', apiUrl)
+
+    // Send the data to the API
+    const response = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(trialRequest),
+    })
+
+    if (!response.ok) {
+      throw new Error(`API request failed with status ${response.status}`)
+    }
 
 
-    // Simulate API call delay
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+    const data = await response.json()
+    console.log('Trial request submitted successfully:', data)
 
 
     trialRequestSent.value = true
     trialRequestSent.value = true
     errorMsg.value = null
     errorMsg.value = null
@@ -431,6 +443,7 @@ const submit = async (): Promise<void> => {
     // Scroll to top to show confirmation message
     // Scroll to top to show confirmation message
     setTimeout(() => router.push({ path: '', hash: '#anchor' }), 30)
     setTimeout(() => router.push({ path: '', hash: '#anchor' }), 30)
   } catch (e) {
   } catch (e) {
+    console.error('Error submitting trial request:', e)
     errorMsg.value =
     errorMsg.value =
       "Une erreur s'est produite lors de l'activation de votre essai. Veuillez réessayer plus tard ou nous contacter directement."
       "Une erreur s'est produite lors de l'activation de votre essai. Veuillez réessayer plus tard ou nous contacter directement."
   }
   }

+ 2 - 0
types/enum/enums.ts

@@ -1,4 +1,5 @@
 export const enum PRODUCT {
 export const enum PRODUCT {
+  FREEMIUM = 'freemium',
   SCHOOL = 'school',
   SCHOOL = 'school',
   SCHOOL_PREMIUM = 'school-premium',
   SCHOOL_PREMIUM = 'school-premium',
   ARTIST = 'artist',
   ARTIST = 'artist',
@@ -35,3 +36,4 @@ export const enum COOKIE_CONSENT_CHOICE {
   CUSTOMIZED = 'customized',
   CUSTOMIZED = 'customized',
   NONE = 'none',
   NONE = 'none',
 }
 }
+

+ 21 - 0
types/interface.d.ts

@@ -1,5 +1,6 @@
 import { ActionMenuItemType } from '~/types/enum/layout'
 import { ActionMenuItemType } from '~/types/enum/layout'
 import { COOKIE_CONSENT_CHOICE } from '~/types/enum/enums'
 import { COOKIE_CONSENT_CHOICE } from '~/types/enum/enums'
+import { STRUCTURE_TYPE_KEYS, LEGAL_STATUS_KEYS } from '~/types/types'
 
 
 interface ActionMenuItem {
 interface ActionMenuItem {
   type: ActionMenuItemType
   type: ActionMenuItemType
@@ -182,3 +183,23 @@ interface Article {
   btnTitle?: string
   btnTitle?: string
   btnHref?: string
   btnHref?: string
 }
 }
+
+interface TrialRequest {
+  structureName: string
+  address: string
+  addressComplement: string
+  postalCode: string
+  city: string
+  structureEmail: string
+  structureType: STRUCTURE_TYPE_KEYS
+  legalStatus: LEGAL_STATUS_KEYS
+  siren: string
+  representativeFirstName: string
+  representativeLastName: string
+  representativeFunction: string
+  representativeEmail: string
+  representativePhone: string
+  termsAccepted: boolean
+  legalRepresentative: boolean
+  newsletterSubscription: boolean
+}

+ 58 - 0
types/types.ts

@@ -0,0 +1,58 @@
+
+export const STRUCTURE_TYPE = {
+  NATIONAL_FEDERATION: {
+    key: 'NATIONAL_FEDERATION',
+    label: 'Fédération nationale',
+  },
+  REGIONAL_FEDERATION: {
+    key: 'REGIONAL_FEDERATION',
+    label: 'Fédération régionale',
+  },
+  DEPARTEMENTAL_FEDERATION: {
+    key: 'DEPARTEMENTAL_FEDERATION',
+    label: 'Fédération départementale',
+  },
+  LOCAL_FEDERATION: {
+    key: 'LOCAL_FEDERATION',
+    label: 'Fédération locale',
+  },
+  GROUPMENT: {
+    key: 'GROUPMENT',
+    label: 'Groupement',
+  },
+  DELEGATION: {
+    key: 'DELEGATION',
+    label: 'Délégation',
+  },
+  ARTISTIC_EDUCATION_ONLY: {
+    key: 'ARTISTIC_EDUCATION_ONLY',
+    label: 'Enseignement artistique uniquement',
+  },
+  ARTISTIC_PRACTICE_ONLY: {
+    key: 'ARTISTIC_PRACTICE_ONLY',
+    label: 'Pratique artistique uniquement',
+  },
+  ARTISTIC_PRACTICE_EDUCATION: {
+    key: 'ARTISTIC_PRACTICE_EDUCATION',
+    label: 'Pratique et enseignement artistique',
+  },
+} as const
+
+export type STRUCTURE_TYPE_KEYS = keyof typeof STRUCTURE_TYPE
+
+export const LEGAL_STATUS = {
+  LOCAL_AUTHORITY: {
+    key: 'LOCAL_AUTHORITY',
+    label: 'Collectivité territoriale',
+  },
+  ASSOCIATION_LAW_1901: {
+    key: 'ASSOCIATION_LAW_1901',
+    label: 'Association loi 1901',
+  },
+  COMMERCIAL_SOCIETY: {
+    key: 'COMMERCIAL_SOCIETY',
+    label: 'Société commerciale',
+  },
+} as const
+
+export type LEGAL_STATUS_KEYS = keyof typeof LEGAL_STATUS