Feat: Modale d'enregistrement des données entreprises (avec CTA)

apps/backend/src/controller/establishment/establishmentController.ts

@@ -38,7 +38,7 @@ export class SireneController extends Controller {
   /**
    * Retrieve establishments informations used in front end
    * for a single establishment using the SIRENE API if search by SIRET
-   * or for up to 3 establishments using the Recherche-entreprise API otherwise.
+   * or for up to 9 establishments using the Recherche-entreprise API otherwise.
    * Also return the number of matches found
    *
    * @summary Search for establishments from a query
@@ -47,14 +47,15 @@ export class SireneController extends Controller {
    */
 
   @Example<Establishment>(exampleEstablishment)
-  @Get('{query}')
+  @Get('{query}/{resultCount}')
   public async getEstablishmentBySiret(
     @Path() query: string,
+    @Path() resultCount: number,
     @Res() requestFailedResponse: TsoaResponse<500, ErrorJSON>,
     @Res() _validationFailedResponse: TsoaResponse<422, ValidateErrorJSON>,
     @Res() notFoundResponse: TsoaResponse<404, EstablishmentNotFoundErrorJSON>
   ): Promise<EstablishmentSearch> {
-    const establishmentResult = await new EstablishmentService().search(query)
+    const establishmentResult = await new EstablishmentService().search(query, resultCount)
 
     if (establishmentResult.isErr) {
       const err = establishmentResult.error

apps/web/public/css/custom.css

@@ -186,12 +186,6 @@ button.fr-link:hover, .tee-router-link:hover {
   line-height: 1.2em;
 }
 
-/* TRACK INPUT */
-.tee-resp-info-block {
-  text-indent: -3.5rem;
-  padding-left: 3.5rem;
-}
-
 /* CUSTOM BUTTON INPUT */
 .tee-btn-next {
   justify-content: end;

apps/web/src/WebApp.vue

@@ -3,6 +3,7 @@
   <TeeDsfrPersonalizeConsent />
   <div>
     <TeeHeader />
+    <TeeRegisterModal v-if="registerModal" />
     <TeeMatomo />
     <router-view v-if="isReady" />
     <template v-else>
@@ -32,18 +33,26 @@ import { useNavigationStore } from './stores/navigation'
 import TeeFooter from './components/TeeFooter.vue'
 import Translation from './utils/translation'
 import Cookie from './utils/cookies'
+import CompanyDataStorage from './utils/storage/companyDataStorage'
 
 const navigationStore = useNavigationStore()
 const router = useRouter()
 const route = useRoute()
-
+const registerModal = ref<boolean>(false)
 const isReady = computed<boolean>(() => {
   return navigationStore.isReady
 })
 
+const toggleRegisterModal = (forceStatus: boolean | undefined) => {
+  registerModal.value = forceStatus || !registerModal.value
+  document.body.style.overflow = registerModal.value ? 'hidden' : ''
+}
+provide('toggleRegisterModal', toggleRegisterModal)
+
 onBeforeMount(() => {
   Translation.setLocale('fr')
   Cookie.setCookies()
+  CompanyDataStorage.updateData()
 })
 
 onMounted(async () => {

apps/web/src/assets/custom.css

@@ -183,12 +183,6 @@ button.fr-link:hover, .tee-router-link:hover {
   line-height: 1.2em;
 }
 
-/* TRACK INPUT */
-.tee-resp-info-block {
-  text-indent: -3.5rem;
-  padding-left: 3.5rem;
-}
-
 /* CUSTOM BUTTON INPUT */
 .tee-btn-next {
   justify-content: end;

apps/web/src/assets/main.scss

@@ -7,6 +7,7 @@
 @import "scss/card";
 @import "scss/checkbox";
 @import "scss/display";
+@import 'scss/footer';
 @import "scss/gradient";
 @import "scss/grid";
 @import "scss/header";
@@ -15,8 +16,9 @@
 @import "scss/radius";
 @import "scss/router";
 @import "scss/searchBar";
+@import "scss/select";
 @import "scss/sidemenu";
 @import "scss/tab";
 @import "scss/tag";
+@import "scss/transition";
 @import "scss/typography";
-@import 'scss/footer';

apps/web/src/assets/scss/searchBar.scss

@@ -1,3 +1,7 @@
+@use "setting";
+@use 'sass:meta';
+@use 'sass:map';
+
 input[type="search"] {
   &::-webkit-search-decoration,
   &::-webkit-search-cancel-button,
@@ -21,3 +25,24 @@ input[type="search"] {
     color: var(--text-disabled-grey);
   }
 }
+
+.fr-search-bar {
+  &-lg {
+    .fr-input, .search-button {
+      max-height: 3rem;
+      line-height: 3rem;
+    }
+  }
+
+  @each $color, $properties in setting.$colors {
+    &--#{$color} {
+      .fr-input, .search-button {
+        @if meta.type-of($properties) == map {
+          box-shadow: inset 0 -2px 0 0 map.get($properties, "color");
+        } @else {
+          box-shadow: inset 0 -2px 0 0 $properties;
+        }
+      }
+    }
+  }
+} 

apps/web/src/assets/scss/select.scss

@@ -0,0 +1,5 @@
+@use 'setting';
+
+.fr-select {
+    background-color: setting.$white;
+} 

apps/web/src/assets/scss/setting/_typography.scss

@@ -8,4 +8,8 @@ $line-heights: (
 $font-styles: (
   italic,
   normal,
-)
+);
+
+$text-decorations: (
+  underline
+);

apps/web/src/assets/scss/transition.scss

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

apps/web/src/assets/scss/typography.scss

@@ -19,6 +19,12 @@
       @include tool.line-height($size)
     }
   }
+
+  @each $decoration in setting.$text-decorations {
+    &--#{$decoration} {
+      text-decoration: $decoration;
+    }   
+  } 
 }
 
 .tee-font {

apps/web/src/auto-imports.d.ts

@@ -41,7 +41,6 @@ declare global {
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
-  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -61,9 +60,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useHead: typeof import('@unhead/vue')['useHead']
   const useHeadSafe: typeof import('@unhead/vue')['useHeadSafe']
-  const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
-  const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useScheme: typeof import('@gouvminint/vue-dsfr')['useScheme']
@@ -73,7 +70,6 @@ declare global {
   const useServerSeoMeta: typeof import('@unhead/vue')['useServerSeoMeta']
   const useSlots: typeof import('vue')['useSlots']
   const useTabs: typeof import('@gouvminint/vue-dsfr')['useTabs']
-  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']

apps/web/src/components.d.ts

@@ -100,9 +100,19 @@ declare module 'vue' {
     TeeListNoResults: typeof import('./components/element/TeeListNoResults.vue')['default']
     TeeMatomo: typeof import('./components/TeeMatomo.vue')['default']
     TeeNoResult: typeof import('./components/element/TeeNoResult.vue')['default']
+    TeeProfileActivity: typeof import('./components/identification/details/TeeProfileActivity.vue')['default']
+    TeeProfileDetails: typeof import('./components/identification/details/TeeProfileDetails.vue')['default']
+    TeeProfileElement: typeof import('./components/identification/details/TeeProfileElement.vue')['default']
+    TeeProfileLocalisation: typeof import('./components/identification/details/TeeProfileLocalisation.vue')['default']
+    TeeProfileSiret: typeof import('./components/identification/details/TeeProfileSiret.vue')['default']
+    TeeProfileSize: typeof import('./components/identification/details/TeeProfileSize.vue')['default']
     TeeProjectButton: typeof import('./components/project/TeeProjectButton.vue')['default']
     TeeQuestionnaire: typeof import('./components/questionnaire/TeeQuestionnaire.vue')['default']
     TeeQuestionnaireResult: typeof import('./components/questionnaire/TeeQuestionnaireResult.vue')['default']
+    TeeRegisterCTA: typeof import('./components/identification/TeeRegisterCTA.vue')['default']
+    TeeRegisterModal: typeof import('./components/identification/TeeRegisterModal.vue')['default']
+    TeeRegisterSiret: typeof import('./components/identification/TeeRegisterSiret.vue')['default']
+    TeeRegisterSiretBar: typeof import('./components/identification/TeeRegisterSiretBar.vue')['default']
     TeeSpinner: typeof import('./components/element/TeeSpinner.vue')['default']
     TeeTabs: typeof import('./components/element/TeeTabs.vue')['default']
     ThemeCard: typeof import('./components/theme/select/ThemeCard.vue')['default']

apps/web/src/components/header/TeeDsfrHeader.vue

@@ -43,10 +43,7 @@
                   @click.prevent.stop="showSearchModal()"
                 />
                 <div class="fr-hidden-lg">
-                  <RegisterCTA
-                    :registration-status="registrationStatus"
-                    @click="updateStatus"
-                  />
+                  <TeeRegisterCTA />
                 </div>
                 <button
                   v-if="isWithSlotNav || quickLinks?.length"
@@ -115,10 +112,7 @@
               </template>
             </div>
             <div class="fr-my-auto fr-px-4v fr-hidden fr-unhidden-lg">
-              <RegisterCTA
-                :registration-status="registrationStatus"
-                @click="updateStatus"
-              />
+              <TeeRegisterCTA />
             </div>
             <div
               v-if="showSearch"
@@ -239,14 +233,12 @@ const props = withDefaults(defineProps<DsfrHeaderProps>(), {
   closeMenuModalLabel: 'Fermer',
   homeLabel: 'Accueil'
 })
-const registrationStatus = ref<boolean>(false)
-const updateStatus = () => {
-  registrationStatus.value = !registrationStatus.value
-}
+
 const emit = defineEmits<{
   (e: 'update:modelValue', payload: string): void
   (e: 'search', payload: string): void
   (e: 'language-select', payload: DsfrLanguageSelectorElement): void
+  (e: 'openRegister'): void
 }>()
 
 const languageSelector = toRef(props, 'languageSelector')