feat: ajout du tutoriel video pour le téléversement (#3413)

mission-apprentissage · Dec 5, 2023 · c16fee0 · c16fee0
1 parent 35dffdd
commit c16fee0
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 45 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -105,8 +105,6 @@ fileignoreconfig:
   checksum: 5fa50502b737d7e06efff5cd4128da53f4dc7a196428149e1695977175e92cab
 - filename: ui/modules/dashboard/DashboardOrganisme.tsx
   checksum: 2740311625e562ca5a15d43eadbed83ae73113716a09b4fbdb2e1f0c79ad42df
-- filename: ui/modules/organismes/Televersement.tsx
-  checksum: 79608f856866cdf4e0232e5729f8909535c9cfe77155bd1799257aa74ff4104a
 - filename: ui/next.config.js
   checksum: e68b7b2b7828b9c665c02503b0505821e2b0ea41c91ae440fbce422c781ef07b
 - filename: ui/pages/auth/inscription/profil.tsx
@@ -121,6 +119,8 @@ fileignoreconfig:
   checksum: a2f835244846eceb8330f07846c128d318de81c5e46741be536b554726b4372c
 - filename: ui/pages/politique-de-confidentialite.tsx
   checksum: ecb4075e29596bc69091cf6a3a3836622cc0ccfa91359e6d96eaa026881886c6
+- filename: ui/modules/organismes/Televersement.tsx
+  checksum: 2322283e936e6f4a419f27f60e1bae886adffc99a40a085131685f4ca77597e3
 scopeconfig:
 - scope: node
 custom_patterns:

diff --git a/ui/modules/organismes/Televersement.tsx b/ui/modules/organismes/Televersement.tsx
@@ -33,8 +33,10 @@ import { cyrb53Hash, normalize } from "@/common/utils/stringUtils";
 import SimplePage from "@/components/Page/SimplePage";
 import Ribbons from "@/components/Ribbons/Ribbons";
 import useToaster from "@/hooks/useToaster";
-import { FileDownloadIcon } from "@/modules/dashboard/icons";
 import { DownloadLine } from "@/theme/components/icons";
+import DownloadSimple from "@/theme/components/icons/DownloadSimple";
+import Eye from "@/theme/components/icons/Eye";
+import Video from "@/theme/components/icons/Video";
 
 import headerTooltips from "./headerTooltips";
 import InfoTeleversement from "./InfoTeleversement";
@@ -266,46 +268,18 @@ export default function Televersement({ organismeId, isMine }: { organismeId: st
           Import des effectifs
         </Heading>
         <InfoBetaPanel />
-        <Button
-          as="a"
-          variant={"link"}
-          fontSize="md"
-          mt="2"
-          borderBottom="1px"
-          borderRadius="0"
-          mb="8"
-          lineHeight="6"
-          p="0"
-          _active={{
-            color: "bluefrance",
-          }}
-          href="/modele-import.xlsx"
-        >
-          <FileDownloadIcon mr="2" />
+        <ButtonTeleversement href="/modele-import.xlsx">
+          <DownloadSimple mr="2" />
           Télécharger le modèle Excel
-        </Button>
-
-        <Button
-          as="a"
-          variant={"link"}
-          target="_blank"
-          fontSize="md"
-          mt="2"
-          borderBottom="1px"
-          borderRadius="0"
-          mb="8"
-          ml="8"
-          lineHeight="6"
-          p="0"
-          _active={{
-            color: "bluefrance",
-          }}
-          href="https://mission-apprentissage.notion.site/Guide-des-donn-es-57bc2515bac34cee9359e517a504df20"
-        >
-          <FileDownloadIcon mr="2" />
+        </ButtonTeleversement>
+        <ButtonTeleversement href="https://mission-apprentissage.notion.site/Guide-des-donn-es-57bc2515bac34cee9359e517a504df20">
+          <Eye mr={2} />
           Guide des données
-        </Button>
-
+        </ButtonTeleversement>
+        <ButtonTeleversement href="https://www.canva.com/design/DAF0aDLacTk/ZxY16rI7C_vBzEuyrEpbIA/watch">
+          <Video mr="2" />
+          Tutoriel en vidéo
+        </ButtonTeleversement>
         {status === "validation_failure" && (
           <>
             <Ribbons variant="error" mb={8}>
@@ -348,7 +322,6 @@ export default function Televersement({ organismeId, isMine }: { organismeId: st
             </HStack>
           </>
         )}
-
         {status === "validation_success" && (
           <Ribbons variant="success" mb={8}>
             <Box mb="8">
@@ -363,7 +336,6 @@ export default function Televersement({ organismeId, isMine }: { organismeId: st
             </Box>
           </Ribbons>
         )}
-
         {data && filteredHeaders && (
           <Box overflowX="auto" mb="8">
             <Table fontSize="sm">
@@ -430,7 +402,6 @@ export default function Televersement({ organismeId, isMine }: { organismeId: st
             </Table>
           </Box>
         )}
-
         {status === "validation_success" && (
           <>
             <Button
@@ -448,7 +419,6 @@ export default function Televersement({ organismeId, isMine }: { organismeId: st
             </Button>
           </>
         )}
-
         {(status === "validation_failure" || status === null) && (
           <>
             <Box {...getRootProps<any>({ style })} mb={8} minH="200px">
@@ -555,3 +525,27 @@ function Header({ header }: { header: string }) {
   }
   return <>{header}</>;
 }
+
+function ButtonTeleversement({ children, href }: { children: React.ReactNode; href: string }) {
+  return (
+    <Button
+      as="a"
+      variant={"link"}
+      target="_blank"
+      fontSize="md"
+      mt="2"
+      borderBottom="1px"
+      borderRadius="0"
+      mb="8"
+      mr="8"
+      lineHeight="6"
+      p="0"
+      _active={{
+        color: "bluefrance",
+      }}
+      href={href}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/ui/theme/components/icons/DownloadSimple.tsx b/ui/theme/components/icons/DownloadSimple.tsx
@@ -0,0 +1,15 @@
+import { Icon } from "@chakra-ui/react";
+import React from "react";
+
+export default function DownloadSimple(props) {
+  return (
+    <Icon width="12px" height="14px" viewBox="0 0 12 14" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 12.6665H12V13.9998H0V12.6665ZM6.66667 5.99984H11.3333L6 11.3332L0.666667 5.99984H5.33333V0.666504H6.66667V5.99984Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}
diff --git a/ui/theme/components/icons/Eye.tsx b/ui/theme/components/icons/Eye.tsx
@@ -0,0 +1,15 @@
+import { Icon } from "@chakra-ui/react";
+import React from "react";
+
+export default function Eye(props) {
+  return (
+    <Icon width="14px" height="14px" viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99978 2C11.5944 2 14.5851 4.58667 15.2124 8C14.5858 11.4133 11.5944 14 7.99978 14C4.40511 14 1.41444 11.4133 0.787109 8C1.41378 4.58667 4.40511 2 7.99978 2ZM7.99978 4.66667C6.15883 4.66667 4.66644 6.15905 4.66644 8C4.66644 9.84095 6.15883 11.3333 7.99978 11.3333C9.84073 11.3333 11.3331 9.84095 11.3331 8C11.3331 6.15905 9.84073 4.66667 7.99978 4.66667ZM7.99978 6C9.10435 6 9.99978 6.89543 9.99978 8C9.99978 9.10457 9.10435 10 7.99978 10C6.89521 10 5.99978 9.10457 5.99978 8C5.99978 6.89543 6.89521 6 7.99978 6Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}
diff --git a/ui/theme/components/icons/Video.tsx b/ui/theme/components/icons/Video.tsx
@@ -0,0 +1,15 @@
+import { Icon } from "@chakra-ui/react";
+import React from "react";
+
+export default function Video(props) {
+  return (
+    <Icon height="14px" viewBox="0 0 14 13" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.0002 0C13.3684 0 13.6668 0.298477 13.6668 0.666667V10C13.6668 10.3682 13.3684 10.6667 13.0002 10.6667H3.3035L0.333496 13V0.666667C0.333496 0.298477 0.631973 0 1.00016 0H13.0002ZM8.3335 3.33333H3.66683V7.33333H8.3335V5.83333L10.3335 7.33333V3.33333L8.3335 4.83333V3.33333Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}