@@ -1,5 +1,5 @@ 
 {
-	"latest": "3.6.8",
-	"lastUpdateCheck": 1646752240876,
+	"latest": "3.6.10",
+	"lastUpdateCheck": 1653460540026,
 	"lastNotification": 1637085344214
 }

@@ -20,6 +20,9 @@ "type": "string"
     },
     "announcement": {
       "type": "richtext"
+    },
+    "faq_link": {
+      "type": "string"
     }
   }
 }

@@ -0,0 +1,15 @@ 
+import Link from '@material-ui/core/Link';
+import useSettings from '../../hooks/useSettings';
+
+interface Props {
+  text: string;
+  link: string;
+}
+
+const FAQLink = ({text, link}: Props) => {
+  const settings = useSettings();
+
+  return <Link target="_blank" href={`${settings?.faq_link}${link}`}>{text}</Link>;
+};
+
+export default FAQLink;

@@ -15,6 +15,8 @@ import {useTranslation} from 'react-i18next';
 import useEventStore from '../../stores/useEventStore';
 import useActions from './useActions';
 import {Vehicle} from '../../generated/graphql';
+import {Box, Divider} from '@material-ui/core';
+import FAQLink from './FAQLink';
 
 interface Props {
   context: {
@@ -94,31 +96,17 @@ }}
       TransitionComponent={Transition}
     >
       <form onSubmit={onCreate}>
-        <DialogTitle>{t('travel.creation.title')}</DialogTitle>
-        <DialogContent>
-          <DatePicker
-            label={t('travel.creation.date')}
-            fullWidth
-            helperText=" "
-            value={date}
-            onChange={setDate}
-            format="DD/MM/YYYY"
-            cancelLabel={t('generic.cancel')}
-            autoFocus
-            id="NewTravelDateTime"
-          />
-          <TimePicker
-            label={t('travel.creation.time')}
-            fullWidth
-            helperText=" "
-            value={time}
-            onChange={setTime}
-            cancelLabel={t('generic.cancel')}
-            ampm={false}
-            minutesStep={5}
-            id="NewTravelTime"
-          />
+        <DialogTitle className={classes.title}>
+          {t('travel.creation.title')}
+        </DialogTitle>
+        <DialogContent className={classes.content}>
+          <Typography className={classes.sectionTitle}>
+            {t('travel.creation.car.title')}
+          </Typography>
           <TextField
+            variant="outlined"
+            size="small"
+            className={classes.field}
             label={t('travel.creation.name')}
             fullWidth
             helperText=" "
@@ -128,15 +116,76 @@ name="name"
             id="NewTravelName"
           />
           <TextField
+            variant="outlined"
+            size="small"
+            className={classes.field}
             label={t('travel.creation.phone')}
             fullWidth
             helperText=" "
             value={phone}
             onChange={e => setPhone(e.target.value)}
             name="phone"
+            FormHelperTextProps={{
+              component: () => (
+                <FAQLink
+                  link={t('travel.creation.phoneHelper.faq')}
+                  text={t('travel.creation.phoneHelper.why')}
+                />
+              ),
+            }}
             id="NewTravelPhone"
           />
+          <div className={classes.slider}>
+            <Typography variant="caption">
+              {t('travel.creation.seats')}
+            </Typography>
+            <Slider
+              value={seats}
+              onChange={(e, value) => setSeats(value)}
+              step={1}
+              marks={MARKS}
+              min={1}
+              max={MARKS.length}
+              valueLabelDisplay="auto"
+              id="NewTravelSeats"
+            />
+          </div>
+          <Divider className={classes.divider} />
+          <Typography className={classes.sectionTitle}>
+            {t('travel.creation.travel.title')}
+          </Typography>
+          <Box className={classes.halfWidthWrapper}>
+            <DatePicker
+              className={classes.halfWidthField}
+              inputVariant="outlined"
+              size="small"
+              label={t('travel.creation.date')}
+              helperText=" "
+              value={date}
+              onChange={setDate}
+              format="DD/MM/YYYY"
+              cancelLabel={t('generic.cancel')}
+              autoFocus
+              id="NewTravelDateTime"
+            />
+            <TimePicker
+              className={classes.halfWidthField}
+              inputVariant="outlined"
+              size="small"
+              label={t('travel.creation.time')}
+              helperText=" "
+              value={time}
+              onChange={setTime}
+              cancelLabel={t('generic.cancel')}
+              ampm={false}
+              minutesStep={5}
+              id="NewTravelTime"
+            />
+          </Box>
           <TextField
+            variant="outlined"
+            size="small"
+            className={classes.field}
             label={t('travel.creation.meeting')}
             fullWidth
             multiline
@@ -149,6 +198,9 @@ name="meeting"
             id="NewTravelMeeting"
           />
           <TextField
+            variant="outlined"
+            size="small"
+            className={classes.field}
             label={t('travel.creation.notes')}
             fullWidth
             multiline
@@ -160,23 +212,8 @@ onChange={e => setDetails(e.target.value)}
             name="details"
             id="NewTravelDetails"
           />
-          <div className={classes.slider}>
-            <Typography variant="caption">
-              {t('travel.creation.seats')}
-            </Typography>
-            <Slider
-              value={seats}
-              onChange={(e, value) => setSeats(value)}
-              step={1}
-              marks={MARKS}
-              min={1}
-              max={MARKS.length}
-              valueLabelDisplay="auto"
-              id="NewTravelSeats"
-            />
-          </div>
         </DialogContent>
-        <DialogActions>
+        <DialogActions className={classes.actions}>
           <Button
             color="primary"
             id="NewTravelCancel"
@@ -193,7 +230,7 @@ disabled={!canCreate}
             aria-disabled={!canCreate}
             id="NewTravelSubmit"
           >
-            {t('generic.create')}
+            {t('travel.creation.submit')}
           </Button>
         </DialogActions>
       </form>
@@ -217,10 +254,42 @@ value,
   label: value,
 }));
 
+const addSpacing = (theme, ratio) => ({
+  margin: `0 ${theme.spacing(3 * ratio)}px`,
+  width: `calc(100% - ${theme.spacing(6 * ratio)}px)`,
+});
+
 const useStyles = makeStyles(theme => ({
+  title: {
+    paddingBottom: 0,
+  },
+  sectionTitle: {
+    ...addSpacing(theme, 1),
+    paddingBottom: theme.spacing(1.5),
+  },
+  content: {
+    padding: `${theme.spacing(2)}px 0`,
+  },
+  field: {
+    ...addSpacing(theme, 1),
+    paddingBottom: theme.spacing(1)
+  },
+  halfWidthWrapper: {
+    ...addSpacing(theme, .5)
+  },
+  halfWidthField: {
+    margin: `0 ${theme.spacing(1.5)}px`,
+    width: `calc(50% - ${theme.spacing(3)}px)`,
+  },
   slider: {
-    marginTop: theme.spacing(2),
+    ...addSpacing(theme, 1),
+  },
+  divider: {
+    margin: `${theme.spacing(2)}px 0`,
   },
+  actions: {
+    paddingTop: 0,
+  }
 }));
 
 export default NewTravelDialog;

@@ -938,6 +938,7 @@ export type SettingInput = {
   gtm_id?: Maybe<Scalars['String']>;
   about_link?: Maybe<Scalars['String']>;
   announcement?: Maybe<Scalars['String']>;
+  faq_link?: Maybe<Scalars['String']>;
   created_by?: Maybe<Scalars['ID']>;
   updated_by?: Maybe<Scalars['ID']>;
 };
@@ -950,6 +951,7 @@ updated_at: Scalars['DateTime'];
   gtm_id?: Maybe<Scalars['String']>;
   about_link?: Maybe<Scalars['String']>;
   announcement?: Maybe<Scalars['String']>;
+  faq_link?: Maybe<Scalars['String']>;
 };
 
 
@@ -1951,6 +1953,7 @@ export type EditSettingInput = {
   gtm_id?: Maybe<Scalars['String']>;
   about_link?: Maybe<Scalars['String']>;
   announcement?: Maybe<Scalars['String']>;
+  faq_link?: Maybe<Scalars['String']>;
   created_by?: Maybe<Scalars['ID']>;
   updated_by?: Maybe<Scalars['ID']>;
 };
@@ -2297,7 +2300,7 @@ export type SettingQuery = (
   { __typename?: 'Query' }
   & { setting?: Maybe<(
     { __typename?: 'Settings' }
-    & Pick<Settings, 'id' | 'gtm_id' | 'about_link' | 'announcement'>
+    & Pick<Settings, 'id' | 'gtm_id' | 'about_link' | 'announcement' | 'faq_link'>
   )> }
 );
 
@@ -2917,6 +2920,7 @@ id
     gtm_id
     about_link
     announcement
+    faq_link
   }
 }
     `;

@@ -4,5 +4,6 @@ id
     gtm_id
     about_link
     announcement
+    faq_link
   }
 }

@@ -133,12 +133,17 @@ "creation": {
       "date": "Date of departure",
       "time": "Departure time",
       "title": "Add a car",
+      "car.title": "Car and driver",
+      "travel.title": "Travel",
       "name": "Name of the car",
       "seats": "Number of seats",
       "meeting": "Meeting place",
       "phone": "Telephone number",
+      "phoneHelper.faq": "/en/terms",
+      "phoneHelper.why": "Why do we ask for a phone number ?",
       "notes": "Additional information",
-      "created": "The car has been created"
+      "created": "The car has been created",
+      "submit": "Add"
     },
     "actions": {
       "remove_alert": "Are you sure you want to remove this car and add the subscribers to the waiting list?",

@@ -133,12 +133,17 @@ "creation": {
       "date": "Date du départ",
       "time": "Heure du départ",
       "title": "Ajouter une voiture",
+      "car.title": "Voiture et contact",
+      "travel.title": "Trajet",
       "name": "Nom de la voiture",
       "seats": "Nombre de places",
       "meeting": "Lieu de rencontre",
       "phone": "Numéro de téléphone",
+      "phoneHelper.faq": "/fr/conditions-utilisation",
+      "phoneHelper.why": "Pourquoi le num. de tél. est-il demandé?",
       "notes": "Infos complémentaires",
-      "created": "La voiture a été créée"
+      "created": "La voiture a été créée",
+      "submit": "Ajouter"
     },
     "actions": {
       "remove_alert": "Voulez-vous vraiment supprimer cette voiture et ajouter les inscrits à la liste d'attente ?",