feat: adding ademe raw programs (#2438)

close
[#2361](#2361)

---------

Co-authored-by: Yohann Valentin <pro@yohannvalentin.com>
Co-authored-by: Yohann Valentin <yvalentin@users.noreply.github.com>

Author: ttdm

.gitignore

@@ -74,6 +74,8 @@ dispositifs*.xlsx
 # Local cache
 **/program_tmp.json
 /test-results/
+temp*.json
+tmp*.json
 
 # Playwright
 /playwright-report/

apps/nuxt/src/components/element/TeeCounterResult.vue

@@ -12,11 +12,12 @@ import Translation from '@/tools/translation'
 
 interface Props {
   toCount?: ProjectType[] | ProgramTypeForFront[]
+  inCount?: number
 }
 
 const props = defineProps<Props>()
 
 const count = computed(() => {
-  return props.toCount?.length || 0
+  return props.inCount || props.toCount?.length || 0
 })
 </script>

apps/nuxt/src/components/program/ProgramDetailRouter.vue

@@ -0,0 +1,15 @@
+<template>
+  <ExternalProgramDetail v-if="isExternalProgram" />
+  <ProgramDetail v-else />
+</template>
+
+<script setup lang="ts">
+import ProgramDetail from '@/components/program/detail/ProgramDetail.vue'
+import ExternalProgramDetail from '@/components/program/externalProgram/detail/ExternalProgramDetail.vue'
+import { useProgramStore } from '@/stores/program'
+import { storeToRefs } from 'pinia'
+
+const { currentProgram, currentExtProgram } = storeToRefs(useProgramStore())
+
+const isExternalProgram = computed(() => !currentProgram.value && !!currentExtProgram.value)
+</script>

apps/nuxt/src/components/program/detail/ProgramActivation.vue

@@ -9,7 +9,7 @@
     <template #content>
       <ol class="fr-order-list">
         <li
-          v-if="!isDataFull"
+          v-if="!isDataFull && showRegistrationStep"
           class="fr-mb-4v fr-mb-md-2v"
         >
           <div class="fr-mb-0 fr-ml-0">{{ Translation.t('program.programActivationRegistration') }}</div>
@@ -22,7 +22,7 @@
           </DsfrButton>
         </li>
         <li
-          v-for="(content, idx) in program.objectifs"
+          v-for="(content, idx) in program?.objectifs"
           :key="`description-paragraph-${idx}`"
           class="fr-mb-4v fr-mb-md-2v"
         >
@@ -38,14 +38,14 @@
               :key="`link-${idx}-${linkId}`"
             >
               <TeeButtonExternalLink
-                v-if="link.lien"
+                v-if="`lien` in link && link.lien"
                 :href="link.lien"
                 class="fr-my-1v fr-mr-md-2v"
               >
                 {{ link.texte }}
               </TeeButtonExternalLink>
               <DsfrButton
-                v-if="link.formulaire && isFormVisible"
+                v-if="`formulaire` in link && link.formulaire && isFormVisible"
                 secondary
                 icon="fr-icon-mail-line"
                 size="md"
@@ -63,20 +63,23 @@
 </template>
 
 <script setup lang="ts">
+import AbstractProgram from '@/tools/program/abstractProgram'
 import Translation from '@/tools/translation'
 import { Marked } from '@/tools/marked'
-import { type ProgramTypeForFront } from '@/types'
 import Navigation from '@/tools/navigation'
 
 interface Props {
-  program: ProgramTypeForFront
   scrollToForm: () => void
   isFormVisible: boolean
+  showRegistrationStep?: boolean
 }
 
-defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  showRegistrationStep: true
+})
 
 const { isDataFull } = storeToRefs(useCompanyDataStore())
+const program = AbstractProgram.getCurrent()
 
 const openModal = () => {
   useNavigationStore().resetFromCtaRegisterModal()

apps/nuxt/src/components/program/detail/ProgramBackLink.vue

@@ -17,14 +17,13 @@
 </template>
 <script setup lang="ts">
 import Navigation from '@/tools/navigation'
-import Program from '@/tools/program/program'
+import AbstractProgram from '@/tools/program/abstractProgram'
 import Translation from '@/tools/translation'
 
-const { currentProgram } = storeToRefs(useProgramStore())
 const { currentProject } = storeToRefs(useProjectStore())
 const navigation = new Navigation()
 
-const backLink = Program.getBackLink(currentProgram.value, currentProject.value)
+const backLink = AbstractProgram.getBackLink(AbstractProgram.getCurrent().value, currentProject.value)
 
 const isCatalogDetail = navigation.isCatalogProgramDetail()
 </script>

apps/nuxt/src/components/program/detail/ProgramDetail.vue

@@ -1,7 +1,11 @@
 <template>
   <Layout :links="links">
     <template
-      v-if="isDataFull || Program.isTemporaryUnavailable(currentProgram) || !Program.isAvailable(currentProgram)"
+      v-if="
+        isDataFull ||
+        AbstractProgram.isTemporaryUnavailable(currentProgram as AbstractProgramTypeForFront) ||
+        !Program.isAvailable(currentProgram)
+      "
       #beforeBreadcrumb
     >
       <ClientOnly>
@@ -25,7 +29,6 @@
           <ProgramTitle />
           <ProgramResume />
           <ProgramMainCta
-            :program="currentProgram"
             :is-activation-visible="isActivationVisible"
             :scroll-to-form="scrollToForm"
             :scroll-to-activation="scrollToActivation"
@@ -35,15 +38,14 @@
       <div ref="activation-ref">
         <ProgramActivation
           v-if="isActivationVisible"
-          :program="currentProgram"
           :is-form-visible="isFormVisible"
           :scroll-to-form="scrollToForm"
         />
       </div>
       <ProgramTiles />
-      <ProgramEligibilityConditions :program="currentProgram" />
+      <ProgramEligibilityConditions />
       <ProgramProjects :program="currentProgram" />
-      <ProgramLongDescription :program="currentProgram" />
+      <ProgramLongDescription />
       <div ref="form-ref">
         <ClientOnly>
           <ProgramForm
@@ -61,6 +63,7 @@ import { TeeDsfrBreadcrumbProps } from '@/components/element/TeeDsfrBreadcrumb.v
 import { useNavigationStore } from '@/stores/navigation'
 import { useProgramStore } from '@/stores/program'
 import Navigation from '@/tools/navigation'
+import AbstractProgram from '@/tools/program/abstractProgram'
 import { ProgramManager } from '@/tools/program/programManager'
 import { ProjectManager } from '@/tools/project/projectManager'
 import { RouteName } from '@/types/routeType'
@@ -72,7 +75,7 @@ import { useExternalLinkTracker } from '@/tools/analytic/useExternalLinkTracker'
 import Analytics from '@/tools/analytic/analytics'
 import { Scroll } from '@/tools/scroll/scroll'
 import { useCompanyDataStore } from '@/stores/companyData'
-import { ProgramEligibility } from '@/types'
+import { AbstractProgramTypeForFront, ProgramEligibility } from '@/types'
 import { defineWebPage, useSchemaOrg } from '@unhead/schema-org/vue'
 
 const { currentProgram } = storeToRefs(useProgramStore())

apps/nuxt/src/components/program/detail/ProgramEligibilityBar.vue

@@ -8,8 +8,9 @@
   />
 </template>
 <script setup lang="ts">
+import AbstractProgram from '@/tools/program/abstractProgram'
 import Translation from '@/tools/translation'
-import { Color, ProgramEligibilityStatus, RouteName } from '@/types'
+import { AbstractProgramTypeForFront, Color, ProgramEligibilityStatus, RouteName } from '@/types'
 import { TeeEligibilityBarLink, TeeEligibilityBarMessage } from '@/components/program/eligibility/TeeEligibilityBar.vue'
 import { useProgramStore } from '@/stores/program'
 import { storeToRefs } from 'pinia'
@@ -43,7 +44,7 @@ const getEligibilityMessage: ComputedRef<TeeEligibilityBarMessage> = computed(()
       role: 'alert'
     }
   }
-  if (Program.isTemporaryUnavailable(program.value)) {
+  if (AbstractProgram.isTemporaryUnavailable(program.value as AbstractProgramTypeForFront)) {
     return {
       default: 'Cette aide est temporairement indisponible.',
       mobile: 'Cette aide est temporairement indisponible.',
@@ -82,15 +83,15 @@ const getEligibilityColor: ComputedRef<Color> = computed(() => {
     return Color.red
   }
 
-  return Program.isTemporaryUnavailable(program.value)
+  return AbstractProgram.isTemporaryUnavailable(program.value as AbstractProgramTypeForFront)
     ? Color.red
     : program.value && [ProgramEligibilityStatus.NotEligible, ProgramEligibilityStatus.Unknown].includes(program.value.eligibility)
       ? Color.red
       : Color.greenLightnessed
 })
 
 const getEligibilityLink: ComputedRef<TeeEligibilityBarLink | undefined> = computed(() => {
-  if (Program.isTemporaryUnavailable(program.value)) {
+  if (AbstractProgram.isTemporaryUnavailable(program.value as AbstractProgramTypeForFront)) {
     return undefined
   }
   switch (program.value?.eligibility) {

apps/nuxt/src/components/program/detail/ProgramEligibilityConditions.vue

@@ -25,7 +25,7 @@
             </h4>
             <ul class="fr-pl-4w fr-mt-1v">
               <li
-                v-for="(value, i) in programEligibility[field]"
+                v-for="(value, i) in programEligibility?.[field]"
                 :key="`elegibility-field-${idx}-value-${i}`"
                 class="fr-mb-0"
                 v-html="Marked.toHtml(value)"
@@ -39,11 +39,14 @@
 </template>
 
 <script setup lang="ts">
+import AbstractProgram from '@/tools/program/abstractProgram'
 import { computed } from 'vue'
-import { ProgramTypeForFront } from '@/types'
+import type { ProgramTypeForFront } from '@tee/data'
 import { Marked } from '@/tools/marked'
 import Translation from '@/tools/translation'
 
+const program = AbstractProgram.getCurrent()
+
 type EligibilityCategory = keyof ProgramTypeForFront["conditions d'éligibilité"]
 
 type Emojis = Record<EligibilityCategory, string>
@@ -70,16 +73,11 @@ const splitInTwo = (fields: EligibilityCategory[]): [EligibilityCategory[], Elig
 }
 
 const getFieldsForColumn = (columnNumber: number): EligibilityCategory[] => {
-  const columns = splitInTwo(order.filter((field) => !!programEligibility.value[field]))
+  const columns = splitInTwo(order.filter((field) => !!programEligibility.value?.[field as keyof typeof programEligibility.value]))
   return columns[columnNumber - 1]
 }
 
-interface Props {
-  program: ProgramTypeForFront
-}
-const props = defineProps<Props>()
-
 const programEligibility = computed(() => {
-  return props.program["conditions d'éligibilité"]
+  return program.value?.["conditions d'éligibilité"]
 })
 </script>

apps/nuxt/src/components/program/detail/ProgramImage.vue

@@ -3,28 +3,35 @@
     class="fr-responsive-img"
     :class="getOperator && getOperator?.color ? `fr-bg--${getOperator?.color}--lightness` : ''"
     :src="getImage()"
-    :alt="`image / ${currentProgram?.titre}`"
+    :alt="`image / ${program?.titre}`"
   />
 </template>
 <script setup lang="ts">
 import { Image } from '@/tools/image'
 import { Operator } from '@/tools/operator'
+import AbstractProgram from '@/tools/program/abstractProgram'
 
-const { currentProgram } = storeToRefs(useProgramStore())
+const program = AbstractProgram.getCurrent()
 
 const img = Image.getUrl
 
 const getOperator = computed(() => {
-  if (!currentProgram.value) {
+  const operatorName = program.value?.['opérateur de contact']
+  if (!operatorName) {
     return undefined
   }
-  return new Operator().getOneByName(currentProgram.value['opérateur de contact'])
+  return new Operator().getOneByName(operatorName)
 })
 
 const getImage = () => {
   const operator = getOperator.value
+
   return operator?.imagePath
     ? img(operator?.imagePath, { loading: 'lazy' })
-    : img(`/${currentProgram.value?.illustration}`, { height: 320, quality: 70, loading: 'lazy' })
+    : img(`/${program.value?.illustration || 'images/TEE_ampoule.webp'}`, {
+        height: 320,
+        quality: 70,
+        loading: 'lazy'
+      })
 }
 </script>

apps/nuxt/src/components/program/detail/ProgramLongDescription.vue

@@ -13,12 +13,9 @@
 </template>
 
 <script setup lang="ts">
-import type { ProgramTypeForFront } from '@/types'
+import AbstractProgram from '@/tools/program/abstractProgram'
 import Translation from '@/tools/translation'
 import { Marked } from '@/tools/marked'
 
-interface Props {
-  program: ProgramTypeForFront
-}
-defineProps<Props>()
+const program = AbstractProgram.getCurrent()
 </script>