feat(signup): show webinars at end of account creation

web/common/AlertEmailDelay.js

@@ -7,7 +7,7 @@ const AlertEmailDelay = () => {
     <Notice
       sx={{ marginY: 2 }}
       style={{ paddingBottom: 0 }}
-      type="warning"
+      type="info"
       description={
         <>
           Il est possible que&nbsp;:

web/common/ButtonGoHome.js

@@ -10,6 +10,7 @@ const ButtonGoHome = () => {
       onClick={() => {
         history.push("/home");
       }}
+      style={{ margin: "auto" }}
     >
       Aller dans mon espace
     </Button>

web/landing/components/WebinarList.js

@@ -1,8 +1,6 @@
 import React from "react";
 import ListItem from "@mui/material/ListItem";
 import ButtonBase from "@mui/material/ButtonBase";
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import {
   addZero,
@@ -16,30 +14,30 @@ import { Button } from "@codegouvfr/react-dsfr/Button";
 
 import { makeStyles } from "@mui/styles";
 import { useWebinars } from "../useWebinars";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import { fr } from "@codegouvfr/react-dsfr";
 
 const useStyles = makeStyles(theme => ({
   webinarCard: {
     width: "100%",
-    paddingBottom: theme.spacing(1),
-    paddingTop: theme.spacing(1),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    backgroundColor: "inherit"
+    padding: theme.spacing(2),
+    backgroundColor: "inherit",
+    border: "1px solid",
+    borderColor: fr.colors.decisions.border.default.grey.default
   },
   webinarDateDay: {
-    fontWeight: "bold",
-    fontSize: "120%",
+    fontWeight: 500,
     lineHeight: 1,
-    letterSpacing: "3px",
     textTransform: "uppercase"
   },
   webinarDateMonth: {
-    fontWeight: "bold",
-    fontSize: "80%",
+    fontWeight: 500,
+    fontSize: "0.625rem",
     textTransform: "uppercase"
   },
   webinarDate: {
-    fontSize: "300%",
+    fontSize: "2rem",
     lineHeight: 1,
     fontWeight: "bold",
     color: theme.palette.primary.main
@@ -74,65 +72,43 @@ export const WebinarList = ({ setCantDisplayWebinarsBecauseNoneOrError }) => {
         ? webinars.slice(0, 10).map((webinar, index) => {
             const webinarDate = new Date(webinar.time * 1000);
             return (
-              <ListItem key={index} target="_blank">
+              <ListItem key={index} target="_blank" sx={{ paddingX: 0 }}>
                 <ButtonBase
                   className={classes.webinarButton}
                   href={webinar.link}
                   target="_blank"
                 >
-                  <Card className={classes.webinarCard}>
-                    <Grid
-                      container
-                      alignItems="center"
-                      spacing={1}
-                      sx={{
-                        spacing: { xs: 2, sm: 6 },
-                        wrap: { xs: "wrap", sm: "nowrap" }
-                      }}
+                  <Box className={classes.webinarCard}>
+                    <Stack
+                      direction={{ xs: "column", md: "row" }}
+                      justifyContent="space-between"
+                      alignItems={{ xs: "flex-start", md: "center" }}
                     >
-                      <Grid
-                        container
-                        item
-                        xs={6}
-                        sm={"auto"}
-                        direction="column"
-                        alignItems="center"
-                        style={{ maxWidth: 120 }}
-                      >
-                        <Grid item>
+                      <Stack direction="row" alignItems="center" columnGap={2}>
+                        <Stack direction="column" alignItems="center">
                           <Typography className={classes.webinarDateDay}>
                             {SHORT_DAYS[webinarDate.getDay()]}
                           </Typography>
-                        </Grid>
-                        <Grid item>
                           <Typography className={classes.webinarDate}>
                             {addZero(webinarDate.getDate())}
                           </Typography>
-                        </Grid>
-                        <Grid item>
                           <Typography className={classes.webinarDateMonth}>
                             {SHORT_MONTHS[webinarDate.getMonth()]}{" "}
                             {webinarDate.getFullYear()}
                           </Typography>
-                        </Grid>
-                      </Grid>
-                      <Grid item xs={6} sm={"auto"}>
+                        </Stack>
                         <Typography className={classes.webinarTime}>
                           {formatTimeOfDay(webinar.time)}
                         </Typography>
-                      </Grid>
-                      <Grid item style={{ flexGrow: 1, maxWidth: 620 }}>
-                        <Typography className={classes.webinarTitle}>
-                          {webinar.title}
-                        </Typography>
-                      </Grid>
-                      <Grid item>
-                        <Button priority="tertiary no outline" size="small">
-                          M'inscrire
-                        </Button>
-                      </Grid>
-                    </Grid>
-                  </Card>
+                      </Stack>
+                      <Typography className={classes.webinarTitle}>
+                        {webinar.title}
+                      </Typography>
+                      <Button priority="tertiary no outline" size="small">
+                        M'inscrire
+                      </Button>
+                    </Stack>
+                  </Box>
                 </ButtonBase>
               </ListItem>
             );

web/signup/Complete.js

@@ -3,24 +3,22 @@ import Typography from "@mui/material/Typography";
 import { useLocation } from "react-router-dom";
 import { makeStyles } from "@mui/styles";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
 import { useStoreSyncedWithLocalStorage } from "common/store/store";
 import Emoji from "../common/Emoji";
 import AlertEmailDelay from "../common/AlertEmailDelay";
 import ButtonGoHome from "../common/ButtonGoHome";
 import { usePageTitle } from "../common/UsePageTitle";
+import { Stack } from "@mui/material";
+import { WebinarList } from "../landing/components/WebinarList";
 
 const useStyles = makeStyles(theme => ({
   title: {
     paddingTop: theme.spacing(4),
-    textAlign: "center",
+    paddingBottom: theme.spacing(2),
     fontSize: "300%"
   },
   container: {
     padding: theme.spacing(4)
-  },
-  grid: {
-    marginBottom: 0
   }
 }));
 
@@ -49,37 +47,32 @@ export function Complete({ type }) {
   const companiesName = location.state ? location.state.companiesName : null;
 
   return (
-    <Container className={`centered ${classes.container}`} maxWidth="sm">
-      <Grid
-        container
-        spacing={8}
-        direction="column"
-        alignItems="center"
-        className={classes.grid}
-      >
-        <Grid item xs={12}>
-          <Typography className={classes.title} variant="h1">
-            <Emoji emoji="🎉" ariaLabel="Succès" />
+    <Container className={`centered ${classes.container}`} maxWidth="md">
+      <Stack rowGap={2}>
+        <Typography className={classes.title} variant="h1">
+          <Emoji emoji="🎉" ariaLabel="Succès" />
+        </Typography>
+        {type === "user" ? (
+          <Typography>
+            L'inscription s'est terminée avec succès ! Un email de vérification
+            de votre compte vous a été envoyé à l'adresse{" "}
+            <strong>{store.userInfo().email}</strong>.
           </Typography>
-        </Grid>
-        <Grid item xs={12} sx={{ textAlign: "center" }}>
-          {type === "user" ? (
-            <Typography>L'inscription s'est terminée avec succès !</Typography>
-          ) : (
-            <Typography>{getCompaniesText(companiesName)}</Typography>
-          )}
-          {type === "user" && (
-            <Typography>
-              Un email de vérification de votre compte vous a été envoyé à
-              l'adresse <strong>{store.userInfo().email}</strong>.
-            </Typography>
-          )}
-          {type === "user" && <AlertEmailDelay />}
-        </Grid>
-        <Grid item xs={12}>
-          <ButtonGoHome />
-        </Grid>
-      </Grid>
+        ) : (
+          <Typography>{getCompaniesText(companiesName)}</Typography>
+        )}
+        {type === "user" && <AlertEmailDelay />}
+        <Typography fontWeight="700" fontSize="1.25rem" mt={2}>
+          Offrez-vous une formation gratuite de 45 minutes !
+        </Typography>
+        <Typography>
+          <b>Apprenez à maîtriser Mobilic</b> grâce à un accompagnement
+          personnalisé et <b>gagnez du temps</b>&nbsp;: formation à la mise en
+          place, démonstration et réponse à toutes vos questions !
+        </Typography>
+        <WebinarList setCantDisplayWebinarsBecauseNoneOrError={() => {}} />
+        <ButtonGoHome />
+      </Stack>
     </Container>
   );
 }