feat: enable authorization validity check (#549)

components/validityCheck/ValidityCheck.jsx

@@ -7,7 +7,8 @@ const ValidityCheck = () => {
     <Box>
       <Heading fontSize="4" pb="1" pt="4">
         <b>Vérifiez la validité </b>
-        d'une autorisation provisoire de travail pour un étudiant étranger
+        d'une autorisation provisoire de travail pour un étudiant étranger ou d'une demande
+        d'introduction d'un travailleur étranger
       </Heading>
       <Text color="text" pb="4">
         Disponible au plus tard 1 heure après délivrance de l'autorisation. Ne concerne que les

components/validityCheck/ValidityCheckValidAuthorizationStatus.jsx

@@ -0,0 +1,42 @@
+// @flow
+import React from "react";
+import { Card, Heading, Text } from "rebass";
+import { format } from "date-fns";
+import frLocale from "date-fns/locale/fr";
+import { List, SubList } from "./Style";
+
+type Props = {
+  data: Object,
+};
+
+const ValidityCheckValidAuthorizationStatus = (props: Props) => {
+  const {
+    data: { ds_id: id, prenom, nom, siret, date_de_debut_apt: start, date_de_fin_apt: end },
+  } = props;
+  const startDate = start ? format(new Date(start), "dd-MM-yyyy", { locale: frLocale }) : "";
+  const endDate = end ? format(new Date(end), "dd-MM-yyyy", { locale: frLocale }) : "";
+  return (
+    <Card border="1px solid" borderColor="green" borderRadius="6px" mb="4" p={[3, 4]}>
+      <Heading color="green" mb="2">
+        Autorisation de travail valide
+      </Heading>
+      <List>
+        <li>{`- Numéro : ${id}`}</li>
+        <li>
+          - Pour le salarié :
+          <SubList>
+            <li>{`- Prénom : ${prenom}`}</li>
+            <li>{`- Nom : ${nom}`}</li>
+          </SubList>
+        </li>
+        <li>{`- Pour l'entreprise identifiée par le numéro SIRET ${siret}`}</li>
+        <li>{`- Valable du ${startDate} au ${endDate}.`}</li>
+      </List>
+      <Text fontWeight="bold" mt="3">
+        Contactez-nous pour récupérer une copie de l'attestation.
+      </Text>
+    </Card>
+  );
+};
+
+export default ValidityCheckValidAuthorizationStatus;

components/validityCheck/ValidityCheckValidIntroductionStatus.jsx

@@ -0,0 +1,50 @@
+// @flow
+import React from "react";
+import { Card, Heading, Text } from "rebass";
+import { format } from "date-fns";
+import frLocale from "date-fns/locale/fr";
+import { List, SubList } from "./Style";
+
+type Props = {
+  data: Object,
+};
+
+const extractFromChamps = (champs: Object[], libelle: string[]) =>
+  champs.find((champ) => champ.type_de_champ.libelle === libelle).value;
+
+const ValidityCheckValidIntroductionStatus = (props: Props) => {
+  const {
+    data: { ds_id: id, prenom, nom, siret, champs },
+  } = props;
+
+  const typeContrat = extractFromChamps(champs, "Type de contrat");
+  const emploi = extractFromChamps(champs, "Emploi occupé");
+  const dureeTravail = extractFromChamps(champs, "Nombre d'heures");
+
+  return (
+    <Card border="1px solid" borderColor="green" borderRadius="6px" mb="4" p={[3, 4]}>
+      <Heading color="green" mb="2">
+        "Demande d'introduction valide."
+      </Heading>
+      <List>
+        <li>{`- Numéro : ${id}`}</li>
+        <li>
+          - Pour le salarié :
+          <SubList>
+            <li>{`- Prénom : ${prenom}`}</li>
+            <li>{`- Nom : ${nom}`}</li>
+          </SubList>
+        </li>
+        <li>{`- Pour l'entreprise identifiée par le numéro SIRET ${siret}`}</li>
+        <li>{`- Pour un contrat de type : ${typeContrat}`}</li>
+        <li>{`- Pour occuper l'emploi : ${emploi}`}</li>
+        <li>{`- Pour une durée de travail de ${dureeTravail}`}</li>
+      </List>
+      <Text fontWeight="bold" mt="3">
+        Contactez-nous pour récupérer une copie de l'attestation.
+      </Text>
+    </Card>
+  );
+};
+
+export default ValidityCheckValidIntroductionStatus;

components/validityCheck/ValidityCheckValidStatus.jsx

@@ -1,41 +1,23 @@
 // @flow
 import React from "react";
-import { Card, Heading, Text } from "rebass";
-import { format } from "date-fns";
-import frLocale from "date-fns/locale/fr";
-import { List, SubList } from "./Style";
+import ValidityCheckValidAuthorizationStatus from "./ValidityCheckValidAuthorizationStatus";
+import ValidityCheckValidIntroductionStatus from "./ValidityCheckValidIntroductionStatus";
 
 type Props = {
   data: Object,
 };
 
-const ValidityCheckValidStatus = (props: Props) => {
-  const {
-    data: { ds_id: id, prenom, nom, siret, date_de_debut_apt: start, date_de_fin_apt: end },
-  } = props;
-  const startDate = format(new Date(start), "dd-MM-yyyy", { locale: frLocale });
-  const endDate = format(new Date(end), "dd-MM-yyyy", { locale: frLocale });
+const ValidityCheckValidStatus = ({ data }: Props) => {
+  const { type } = data;
+
   return (
-    <Card border="1px solid" borderColor="green" borderRadius="6px" mb="4" p={[3, 4]}>
-      <Heading color="green" mb="2">
-        Autorisation de travail valide.
-      </Heading>
-      <List>
-        <li>{`- Numéro : ${id}`}</li>
-        <li>
-          - Pour le salarié :
-          <SubList>
-            <li>{`- Prénom : ${prenom}`}</li>
-            <li>{`- Nom : ${nom}`}</li>
-          </SubList>
-        </li>
-        <li>{`- Pour l'entreprise identifiée par le numéro SIRET ${siret}`}</li>
-        <li>{`- Valable du ${startDate} au ${endDate}.`}</li>
-      </List>
-      <Text fontWeight="bold" mt="3">
-        Contactez-nous pour récupérer une copie de l'attestation.
-      </Text>
-    </Card>
+    <>
+      {type === "authorization" ? (
+        <ValidityCheckValidAuthorizationStatus data={data} />
+      ) : (
+        <ValidityCheckValidIntroductionStatus data={data} />
+      )}
+    </>
   );
 };
 

pages/validitycheck.jsx

@@ -7,7 +7,10 @@ import ValidityCheck from "../components/validityCheck";
 const ValidityCheckPage = () => (
   <Box bg="white">
     <Head>
-      <title>Work in France - Vérification d'une autorisation provisoire de travail</title>
+      <title>
+        Work in France - Vérification d'une autorisation provisoire de travail ou d'une demande
+        d'introduction d'un travailleur étranger
+      </title>
     </Head>
     <Wrapper>
       <Flex justifyContent="center">