<commit_before>import React from 'react';

import { ButtonLink } from '../../uiComponents';
import { VISITOR } from './contactForm';
import { logParcoursClient } from '../../utils/client/analytics';

import { ContactForm } from './index';

export enum SUBJECT {
  CHERCHE_API,
  CHERCHE_API_PART,
  FRANCECONNECT_PART,
  FRANCECONNECT_ENTREPRISE,
  NEW_API,
  CANT_FIND,
  CARTE_GRISES,
  TELEPOINT,
  CONTACT,
  DS,
  VACCINATION,
  NONE,
}

const Questions = [
  {
    value: SUBJECT.CHERCHE_API_PART,
    label: 'Je cherche une API',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.CHERCHE_API,
    label: 'Je cherche une API',
    public: [
      VISITOR.ENTREPRISE,
      VISITOR.ASSO,
      VISITOR.ADMINISTRATION,
      VISITOR.COLLECTIVITE,
      VISITOR.EDITOR,
    ],
  },
  {
    value: SUBJECT.NEW_API,
    label: 'J’ai envie de partager mon API sur api.gouv',
    public: [VISITOR.ADMINISTRATION],
  },
  {
    value: SUBJECT.CANT_FIND,
    label: 'Je ne trouve pas l’API dont j’ai besoin',
    public: [
      VISITOR.ENTREPRISE,
      VISITOR.ADMINISTRATION,
      VISITOR.COLLECTIVITE,
      VISITOR.EDITOR,
      VISITOR.ASSO,
    ],
  },
  {
    value: SUBJECT.FRANCECONNECT_PART,
    label: 'Je veux me connecter à FranceConnect',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.CARTE_GRISES,
    label:
      'Je cherche une API des plaques d’immatriculation, du SIV ou des cartes grises',
    public: [VISITOR.ENTREPRISE],
  },
  {
    value: SUBJECT.DS,
    label: 'Je cherche démarches simplifiées',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.FRANCECONNECT_ENTREPRISE,
    label: 'Je veux FranceConnecter mon service',
    public: [VISITOR.ENTREPRISE, VISITOR.ASSO],
  },
  {
    value: SUBJECT.TELEPOINT,
    label: 'Je cherche mon solde de points de permis de conduire',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.VACCINATION,
    label: 'Je cherche à obtenir une attestation de vaccination',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.CONTACT,
    label: 'Autre',
    public: [
      VISITOR.ENTREPRISE,
      VISITOR.ASSO,
      VISITOR.ADMINISTRATION,
      VISITOR.COLLECTIVITE,
      VISITOR.PARTICULIER,
      VISITOR.EDITOR,
    ],
  },
];

interface IProps {
  subject: SUBJECT;
  visitorType: VISITOR;
}

export const logClic = () => {
  logParcoursClient('4. Clic sur le CTA');
};

const Explanations: React.FC<IProps> = ({ subject, visitorType }) => {
  switch (subject) {
    case SUBJECT.CHERCHE_API_PART:
      return (
        <div className="subject-answer">
          <p>
            Ce site internet référence les API des administrations qui rendent
            leur données disponibles.
          </p>
          <p>
            En tant que particulier, vous êtes libre d’utiliser les{' '}
            <b>API ouvertes à tous</b>. Les API nécessitant une habilitation
            sont réservées aux organisations éligibles (acteurs publics et dans
            certains cas, entreprises).
          </p>
          <p>
            Toutes nos API sont visibles{' '}
            <a href="rechercher-api">sur cette page</a>. Cliquez sur "Uniquement
            les API ouvertes à tous" pour n’afficher que les API ouvertes.
          </p>
          <div className="layout-center">
            <ButtonLink size="large" href="/rechercher-api" onClick={logClic}>
              Rechercher une API
            </ButtonLink>
          </div>
          <br />
          <p>
            Au fait, connaissez-vous le{' '}
            <a href="https://data.gouv.fr">
              portail de nos collègues de l’open data ?
            </a>
          </p>
        </div>
      );
    case SUBJECT.CHERCHE_API:
      const word =
        visitorType === VISITOR.ENTREPRISE || visitorType === VISITOR.ASSO
          ? 'acteur privé'
          : visitorType === VISITOR.EDITOR
          ? 'éditeur'
          : 'acteur public';
      return (
        <div className="subject-answer">
          <p>
            En tant qu'{word}, vous êtes libre d’utiliser <b>toutes</b> les API
            ouvertes à tous et <b>certaines</b> des API nécessitant une
            habilitation.
          </p>
          <p>
            Toutes nos API sont visibles{' '}
            <a href="rechercher-api">sur cette page</a>. Si une API vous
            intéresse, pensez à vérifier dans la section <b>Accès</b> de la
            fiche API quelles sont les conditions d'accès à la donnée.
          </p>
          <div className="layout-center">
            <ButtonLink size="large" href="/rechercher-api" onClick={logClic}>
              Rechercher une API
            </ButtonLink>
          </div>
        </div>
      );
    case SUBJECT.FRANCECONNECT_PART:
      return (
        <div className="subject-answer">
          <p>
            Ce site internet <b>ne permet pas</b> de se connecter à France
            Connect
          </p>
          <p>
            Vous trouverez plus d’explications sur{' '}
            <a href="https://franceconnect.gouv.fr">le site de FranceConnect</a>
            . En particulier, nous vous recommandons de consulter la FAQ France
            Connect :
          </p>
          <div className="layout-center"><commit_msg>Add link in parcours client<commit_after>import React from 'react';

import { ButtonLink } from '../../uiComponents';
import { VISITOR } from './contactForm';
import { logParcoursClient } from '../../utils/client/analytics';

import { ContactForm } from './index';

export enum SUBJECT {
  CHERCHE_API,
  CHERCHE_API_PART,
  FRANCECONNECT_PART,
  FRANCECONNECT_PROBLM_PART,
  FRANCECONNECT_ENTREPRISE,
  NEW_API,
  CANT_FIND,
  CARTE_GRISES,
  TELEPOINT,
  CONTACT,
  DS,
  VACCINATION,
  NONE,
}

const Questions = [
  {
    value: SUBJECT.CHERCHE_API_PART,
    label: 'Je cherche une API',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.CHERCHE_API,
    label: 'Je cherche une API',
    public: [
      VISITOR.ENTREPRISE,
      VISITOR.ASSO,
      VISITOR.ADMINISTRATION,
      VISITOR.COLLECTIVITE,
      VISITOR.EDITOR,
    ],
  },
  {
    value: SUBJECT.NEW_API,
    label: 'J’ai envie de partager mon API sur api.gouv',
    public: [VISITOR.ADMINISTRATION],
  },
  {
    value: SUBJECT.CANT_FIND,
    label: 'Je ne trouve pas l’API dont j’ai besoin',
    public: [
      VISITOR.ENTREPRISE,
      VISITOR.ADMINISTRATION,
      VISITOR.COLLECTIVITE,
      VISITOR.EDITOR,
      VISITOR.ASSO,
    ],
  },
  {
    value: SUBJECT.FRANCECONNECT_PROBLM_PART,
    label: 'J’ai un problème avec FranceConnect',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.FRANCECONNECT_PART,
    label: 'Je veux me connecter à FranceConnect',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.CARTE_GRISES,
    label:
      'Je cherche une API des plaques d’immatriculation, du SIV ou des cartes grises',
    public: [VISITOR.ENTREPRISE],
  },
  {
    value: SUBJECT.DS,
    label: 'Je cherche démarches simplifiées',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.FRANCECONNECT_ENTREPRISE,
    label: 'Je veux FranceConnecter mon service',
    public: [VISITOR.ENTREPRISE, VISITOR.ASSO],
  },
  {
    value: SUBJECT.TELEPOINT,
    label: 'Je cherche mon solde de points de permis de conduire',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.VACCINATION,
    label: 'Je cherche à obtenir une attestation de vaccination',
    public: [VISITOR.PARTICULIER],
  },
  {
    value: SUBJECT.CONTACT,
    label: 'Autre',
    public: [
      VISITOR.ENTREPRISE,
      VISITOR.ASSO,
      VISITOR.ADMINISTRATION,
      VISITOR.COLLECTIVITE,
      VISITOR.PARTICULIER,
      VISITOR.EDITOR,
    ],
  },
];

interface IProps {
  subject: SUBJECT;
  visitorType: VISITOR;
}

export const logClic = () => {
  logParcoursClient('4. Clic sur le CTA');
};

const Explanations: React.FC<IProps> = ({ subject, visitorType }) => {
  switch (subject) {
    case SUBJECT.CHERCHE_API_PART:
      return (
        <div className="subject-answer">
          <p>
            Ce site internet référence les API des administrations qui rendent
            leur données disponibles.
          </p>
          <p>
            En tant que particulier, vous êtes libre d’utiliser les{' '}
            <b>API ouvertes à tous</b>. Les API nécessitant une habilitation
            sont réservées aux organisations éligibles (acteurs publics et dans
            certains cas, entreprises).
          </p>
          <p>
            Toutes nos API sont visibles{' '}
            <a href="rechercher-api">sur cette page</a>. Cliquez sur "Uniquement
            les API ouvertes à tous" pour n’afficher que les API ouvertes.
          </p>
          <div className="layout-center">
            <ButtonLink size="large" href="/rechercher-api" onClick={logClic}>
              Rechercher une API
            </ButtonLink>
          </div>
          <br />
          <p>
            Au fait, connaissez-vous le{' '}
            <a href="https://data.gouv.fr">
              portail de nos collègues de l’open data ?
            </a>
          </p>
        </div>
      );
    case SUBJECT.CHERCHE_API:
      const word =
        visitorType === VISITOR.ENTREPRISE || visitorType === VISITOR.ASSO
          ? 'acteur privé'
          : visitorType === VISITOR.EDITOR
          ? 'éditeur'
          : 'acteur public';
      return (
        <div className="subject-answer">
          <p>
            En tant qu'{word}, vous êtes libre d’utiliser <b>toutes</b> les API
            ouvertes à tous et <b>certaines</b> des API nécessitant une
            habilitation.
          </p>
          <p>
            Toutes nos API sont visibles{' '}
            <a href="rechercher-api">sur cette page</a>. Si une API vous
            intéresse, pensez à vérifier dans la section <b>Accès</b> de la
            fiche API quelles sont les conditions d'accès à la donnée.
          </p>
          <div className="layout-center">
            <ButtonLink size="large" href="/rechercher-api" onClick={logClic}>
              Rechercher une API
            </ButtonLink>
          </div>
        </div>
      );
    case SUBJECT.FRANCECONNECT_PROBLM_PART:
      return (
        <div className="subject-answer">
          <p>
            Si vous rencontrez un problème avec FranceConnect, nous vous
            recommandons de contacter directement l’équipe via la FAQ de
            FranceConnect :
          </p>
          <div className="layout-center">
            <ButtonLink
              size="large"
              href="https://franceconnect.gouv.fr/faq"
              onClick={logClic}
            >
              Accéder à la page d’aide France Connect
            </ButtonLink>
          </div>
        </div>
      );
    case SUBJECT.FRANCECONNECT_PART:
      return (
        <div className="subject-answer">
          <p>
            Ce site internet <b>ne permet pas</b> de se connecter à France
            Connect
          </p>
          <p>
            Vous trouverez plus d’explications sur{' '}
            <a href="https://franceconnect.gouv.fr">le site de FranceConnect</a>
            . En particulier, nous vous recommandons de consulter la FAQ France
            Connect :
          </p>
          <div className="layout-center">
{'fraction_non_alphanumeric': 0.10897039328325232, 'fraction_numerical': 0.00017675651789659743, 'mean_word_length': 2.0567260940032415, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 115, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5512865', 'n_tokens_mistral': 3823, 'n_tokens_neox': 3770, 'n_words': 926}