# Projets

# Méga LP

# Online Booking Hyundai

# Paramètres Url

The parameter "params" is used for autocomplation. This parameter contains others sub-parameters :

- "immat" without "-", For exemple immat = fb329xr
- "firstname"
- "lastname"
- "email"
- "phone"

You need to use ";" to separate each sub-parameters

```sh
Exemple URL with all parameters : ?utm_medium=email&utm_source=actito&utm_campaign=XXXXXX&utm_term=PUID&utm_content={Convaincus}_{high}_{high}_{high}_{high}_{high}_{high}_{high}_{high}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{medium}&params=immat:fb329xr;firstname:Jonh;lastname:Doe;email:jonh@gmail.com;tel:0666666666;services:batterie,contrat&codesiebel=HF00000
```

##### If you need to auto select the differents services you can use the sub-parameter "services" in the parameter params

Exemple with services sub-parameter : 
```sh 
params=immat:fb329xr;firstname:Jonh;lastname:Doe;email:jonh@gmail.com;tel:0666666666;services:batterie
```

You can add others services with a ',' : 
```sh 
services:batterie,contrat
```

# Setup

# Onlinebooking

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
pnpm install
```

### Compile and Hot-Reload for Development

```sh
pnpm dev
```

### Compile and Minify for Production

```sh
pnpm build
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
pnpm test:unit
```

### Run End-to-End Tests with [Cypress](https://www.cypress.io/)

```sh
pnpm test:e2e:dev
```

This runs the end-to-end tests against the Vite development server.
It is much faster than the production build.

But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):

```sh
pnpm build
pnpm test:e2e

# Online Booking KIA

# Form Builder

# Guide d'utilisation

Découvrez comment utiliser le builder de formulaires.  
   
Vous trouverez le json à remplir dans le dossier /templates à la racine du projet.

```json
"formTitle": "Formulaire Abonnement Hyundai Leasing",
"subTitle": "Demandez à être rappelé par l’un de nos conseiller Hyundai",
"validation": "Votre demande a été envoyée avec succès",
```

Au sein de ces clés valeurs, vous pourrez définir respectivement :

1. Le titre de votre formulaire
2. Le sous-titre de votre formulaire
3. Le message de validation affiché une fois le formulaire soumit

**Voici un exemple gérant les champs Nom et Prénom dans un formulaire**

```json
{
    "rowClass": "row",
    "fields": [
      {
        "fieldName": "firstName",
        "match": "firstName",
        "id": "firstName",
        "label": "Prénom",
        "name": "firstName",
        "class": "col-xs-12 col-sm-4 col-sm-offset-2",
        "required": true
      },
      {
        "fieldName": "lastName",
        "match": "lastName",
        "id": "lastName",
        "label": "Nom",
        "name": "lastName",
        "class": "col-xs-12 col-sm-4",
        "required": true
      }
    ]
}
```

Tout d'abord, il faut définir la clé valeur suivante afin de définir une rangée qui comportera les champs :

```
"rowClass": "row"
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk-"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Ensuite il faut définir un tableau pour définir ses champs :

```
"fields" : []
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--1"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Pour créer un champ (par exemple 'Nom'), vous aurez besoin de resneigner entre les crochets de la clé "fields" les clés valeurs suivantes :

```
"fieldName" : "lastName"
"match": "lastName",
"id": "lastName",
"name": "lastName",
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--2"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>C'est important pour ces clés d'avoir la même valeur, sinon votre champ risque de ne pas fonctionner correctement. Définissez ensuite le label pour donner à votre champ le nom que vous souhaitez afficher :

```
"label": "Libre à vous de décider"
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--3"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Si vous reseignez la clé valeur suivante, L'utilisateur de votre formulaire sera obligé de remplir le champ afin de valider le formulaire :

```
"required" : true
```

# Liste des différents champs

Civilité :

```
{
  "fieldName": "civilite",
  "title": "Civilité",
  "id": "civilite",
  "type": "radio",
  "label": "Civilité",
  "name": "civilite",
  "value": "",
  "class": "col-xs-12 col-sm-6 col-sm-offset-2",
  "required": true,
  "options": [
    { "label": "Monsieur", "value": "Mr." },
    { "label": "Madame", "value": "Ms." }
  ]
}
```

<div dir="auto" id="bkmrk-"><div><svg aria-hidden="true" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Prénom :

```
{
  "fieldName": "firstName",
  "match": "firstName",
  "id": "firstaName",
  "label": "Prénom",
  "name": "firstName",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "required": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--1"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Nom :

```
{
  "fieldName": "lastName",
  "match": "lastName",
  "id": "lastName",
  "label": "Nom",
  "name": "lastName",
  "class": "col-xs-12 col-sm-4",
  "required": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--2"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Téléphone :

```
{
  "fieldName": "telephone",
  "match": "telephone",
  "id": "telephone",
  "label": "Téléphone",
  "name": "telephone",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "onlyNumbers": true,
  "required": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--3"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Email :

```
{
  "fieldName": "email",
  "match": "email",
  "id": "email",
  "label": "Email",
  "name": "email",
  "class": "col-xs-12 col-sm-4",
  "required": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--4"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Code Postal :

```
{
  "fieldName": "postalCode",
  "match": "postalCode",
  "id": "postalCode",
  "label": "Code Postal",
  "name": "postalCode",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "required": true,
  "onlyNumbers": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--5"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Ville :

```
{
  "fieldName": "city",
  "match": "city",
  "id": "city",
  "label": "Ville",
  "name": "city",
  "class": "col-xs-12 col-sm-4",
  "required": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--6"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Concession :

```
{
  "fieldName": "concession",
  "match": "concession",
  "id": "concession",
  "type": "select",
  "label": "Concession",
  "name": "concession",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "required": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--7"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Date :

```
{
  "fieldName": "date",
  "id": "date",
  "type": "date",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "label": "Rendez-vous",
  "name": "date",
  "required": true,
  "disable-dates": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--8"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Modèles Hyundai :

```
```

```
{
  "fieldName": "modeles",
  "match": "modeles",
  "id": "modeles",
  "label": "Modeles",
  "name": "modeles",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "type": "select",
  "required": true
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--10"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Commentaire :

```
{
  "fieldName": "commentaire",
  "type": "commentaire",
  "id": "commentaire",
  "label": "Commentaire",
  "name": "commentaire",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2"
}
```

<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" id="bkmrk--11"><div class="zeroclipboard-container"><svg aria-hidden="true" class="octicon octicon-copy js-clipboard-copy-icon" data-view-component="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div></div>Optin :

```
{
  "fieldName": "optin",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "type": "optin"
}
```

#### Disposition sur la page :

La disposition des champs est géré avec Flexbox Grid, une bibliothèque sass. Partez du principe que votre page est découpée verticalement sur 12 portions.

<div class="markdown-heading" dir="auto" id="bkmrk--12">[<svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg>](https://github.com/INNOCEAN-FRANCE/form_builder#disposition-sur-la-page-)</div>1. "col-xs-12" renvoie au format mobile, et prend 100% de la largeur de la page (12/12)
2. "col-sm-8" renvoie au format desktop, et prend 66% de la largeur de la page (8/12)
3. "col-md-offset-2" renvoie encore une fois au format desktop, et indique que le champ devra se décaler de 2/12 sur la page.

<p class="callout info">Pour plus d'informations, réferez vous à la documentation officielle de [Flexbox Grid](http://flexboxgrid.com/)</p>

# LeadFactory (Directus)

# 2. Interface

## Pages principales

Le projet est structuré autour de **quatre pages principales** :

- **Contenu**  
    Page centrale de gestion des scénarios et des campagnes.
- **Utilisateurs** *(non-modifiable)*  
    Gestion des comptes et des droits (lecture seule).
- **Bibliothèque**  
    Médiathèque centralisée (images, vidéos).
- **Tableaux de bord**  
    Accès aux dashboards d’analyse et de reporting.

## Collections principales : 

LeadFactory repose sur **quatre collections clés** :

- **Scénario**
- **Formulaires** *(non-modifiable)*
- **Type de scénario** *(non-modifiable)*
- **Véhicules** *(non-modifiable)*

[![Capture d’écran 2025-12-22 à 15.14.18.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-14-18.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-14-18.png)

## Détails de la collection Scénario

L'interface de Directus permet de naviguer, filtrer, rechercher facilement des informations en fonction de différents critères. Il est même possible d'ajouter des colonnes afin d'obtenir plus d'informations.

[![Capture d’écran 2025-12-22 à 15.48.08.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-48-08.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-48-08.png)

1. Bouton de tri des scénarios : Lorsqu’il est activé (icône blanche), il permet de modifier l’ordre d’affichage des scénarios.
2. Boutons de gestion de la collection : Permettent de trier la liste et d’ajouter de nouveaux scénarios.
3. Bouton d’ajout de champ liés aux scénarios  
      
    ⚠️ Fonctions suivantes disponibles uniquement avec le plug-in Chrome directus-scenario-thumbnails-crome installé. ⚠️[plugin-chrome-directus-V2.zip](https://wiki.apps.innocean.app/attachments/26)
4. Redirection vers le scénario : Au click sur le short\_id, permet d’accéder directement au scénario après sa création.
5. Aperçu des slides du scénario : Un clic permet de les agrandir, de lire les vidéos si présentes et de naviguer entre elles.

# 3. Collection scénario

## Préambule 

La **collection Scénario** constitue le **cœur fonctionnel de LeadFactory**.  
C’est à partir de cette collection que sont définies, configurées et pilotées l’ensemble des **landing pages** générées par la plateforme.

Un scénario regroupe, au sein d’une même configuration, tous les éléments nécessaires à une campagne :  
contenus médias, structure visuelle, formulaire multi-étapes, véhicules associés, mentions légales et paramètres de tracking.

Chaque scénario publié correspond à **une landing page active**, automatiquement générée et prête à collecter des leads.  
Cette approche permet de **standardiser les parcours**, d’assurer la **cohérence des données collectées** et de faciliter la mise en ligne rapide de nouvelles campagnes, sans développement spécifique.

La collection Scénario offre ainsi un **point d’entrée unique** pour créer, maintenir et faire évoluer les campagnes LeadFactory, tout en garantissant un cadre robuste, scalable et orienté performance.

## 1. Paramètres généraux 

Ces paramètres permettent d’identifier le scénario, de contrôler sa mise en ligne et d’assurer le suivi marketing.

- **Statut :**  
    **Publié** : le scénario est accessible en ligne.  
    **Brouillon ou Archivé** : le scénario n’est pas disponible.
- **Nom :**  
    Nom interne servant uniquement à l’organisation.
- **Type :**  
    Catégorie liée à la collection Type de scénario.
- **Code campagne :**  
    Utilisé pour le tracking marketing.
- **Optin marketing :**  
    Active ou désactive l’affichage des optins. Activé par défaut.
- **Commentaire :** Notes internes non visibles sur la landing page.

[![Capture d’écran 2025-12-22 à 15.22.26.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-22-26.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-22-26.png)

## 2. Paramètres des Slides 

Cette partie constitue la partie "Slide" à gauche de la landing page. Si aucun média n’est renseigné, la partie visuelle de la landing page ne sera pas affichée.

- **Titre :**  
    Optionnel, affiché en haut à gauche.
- **Sous-titre :**  
    Optionnel, affiché sous le titre. Masqué si un véhicule est associé.
- **Média :**  
    Image ou vidéo provenant de la médiathèque.
- **Règles médias :**  
    Images : Format WebP, 1500x1500px, poids max 700 Ko.  
    Vidéos : Format MP4, poids max 8 Mo.
- **Véhicule :** Associe un modèle pour afficher son prix sur la slide (valable uniquement en scenario B2C)

[![Capture d’écran 2025-12-22 à 15.25.54.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-25-54.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-25-54.png)

## 3. Paramètres Formulaires

Ces paramètres définissent le formulaire affiché sur la landing page, son contenu et con comportement après soumission

- **Formulaire :**  
    Sélection du formulaire utilisé.
- **Titre du formulaire :**  
    Titre principal affiché.
- **Sous-titre du formulaire :**  
    Texte secondaire.
- **Véhicules :**  
    Liste des modèles disponibles dans le formulaire.
- **Questions post-formulaire :**  
    Affiche des questions supplémentaires après la soumission.
- **Texte du CTA :**  
    Texte du bouton final. Par défaut “Réserver un essai”
- **Message de confirmation :**  
    Message affiché après validation. Par défaut “Félicitations, votre demande d'essai a bien été prise en compte.”

[![Capture d’écran 2025-12-22 à 15.30.59.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-30-59.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-30-59.png)

### 4. Paramètres Autres

- **Tracking :**  
    Il est possible d'ajouter un script de tracking spécifique pour ce scénario. Code HTML/JS uniquement.
- **Mentions légales :**  
    Texte personnalisé de mentions légales.

[![Capture d’écran 2025-12-22 à 15.34.23.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-34-23.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-34-23.png)

# 4. Création de scénario

Tuto à venir

# 1. Présentation

### Principe de fonctionnement

Chaque **scénario** correspond à une campagne et permet de générer automatiquement **une landing page complète**, incluant :

- **Des contenus médias** : images et/ou vidéos
- **Les mentions légales** associées à la campagne
- **Un formulaire multi-étapes entièrement dynamique**, avec champs conditionnels et logique métier

Une fois le scénario configuré dans Directus, **LeadFactory se charge automatiquement** de :

- l’affichage des contenus sur la landing page,
- la gestion complète du formulaire (parcours, validation, étapes),
- l’envoi des leads vers le **webservice associé**,
- l’intégration de toutes les **informations de tracking** nécessaires (campagne, source, UTM, etc.).

### Rôle de Directus

Directus agit comme **back-office central et headless CMS** :

- Configuration des scénarios de landing pages
- Gestion des formulaires et de leur logique
- Administration des campagnes et du tracking
- Gestion des utilisateurs, rôles et permissions
- Extension via hooks et scripts personnalisés

Il permet à des équipes non techniques de créer et maintenir des campagnes complexes, tout en garantissant un cadre technique robuste et maîtrisé.

### Architecture (vue d’ensemble)

- **Directus** : back-end headless (API REST / GraphQL, logique métier, permissions)
- **Front-end** : landing pages dynamiques (Svelte / JS) consommant l’API
- **Stockage** : médias et assets externalisés (S3 compatible)
- **Data &amp; reporting** : exploitation des leads dans des outils d’analyse (dashboards, CRM, BI)

### Valeur ajoutée

- **Gain de temps** sur la mise en place des campagnes
- **Modularité** : un même socle pour des dizaines de formulaires
- **Sécurité &amp; gouvernance** via les rôles et permissions Directus
- **Pilotage data-driven** : données propres, structurées, historisées
- **Scalabilité** : ajout de nouvelles mécaniques sans refonte globale

### Accès à la plateforme

👉 **URL de connexion admin** :  
[https://leadfactory.apps.hyundai.media/admin/login](https://leadfactory.apps.hyundai.media/admin/login)

# Nouvelle page

test

# 5. Affichage des scénarios