Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(contact): add tracking on sr and contact popup
Browse files Browse the repository at this point in the history
fix #2349
lionelB committed Feb 20, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 978477e commit 36136ae
Showing 4 changed files with 100 additions and 65 deletions.
143 changes: 79 additions & 64 deletions packages/code-du-travail-frontend/src/common/ServiceRenseignement.js
Original file line number Diff line number Diff line change
@@ -1,83 +1,98 @@
import React from "react";
import React, { useState, useCallback, useEffect } from "react";
import { UID } from "react-uid";
import styled from "styled-components";
import { useRouter } from "next/router";
import { Heading, Input, theme } from "@socialgouv/react-ui";

import servicesDeRenseignement from "../data/services-de-renseignement.json";
import { matopush } from "../piwik.js";

function DepartmentComponent(data) {
function DepartementLink({ departement }) {
const trackSRClick = useCallback(() => {
matopush(["trackEvent", "contact", "click_direccte_link"]);
}, []);
return (
<p>
<a target="_blank" rel="noopener noreferrer" href={data.url}>
{data.url}
<a
onClick={trackSRClick}
target="_blank"
rel="noopener noreferrer"
href={departement.url}
>
{departement.url}
</a>
</p>
);
}

class ServiceRenseignement extends React.Component {
state = {
departmentData: null
};

onDepartmentInput = e => {
const departmentNum = (e.target.value || "").toLowerCase();
const departmentData = servicesDeRenseignement[departmentNum];
this.setState({
departmentData: departmentData
});
};
function ServiceRenseignement() {
const [departementData, setDepartementData] = useState();
const router = useRouter();
const onDepartmentInput = useCallback(
keyEvent => {
const departmentNum = (keyEvent.target.value || "").toLowerCase();
const departmentData = servicesDeRenseignement[departmentNum];
setDepartementData(departmentData);
},
[setDepartementData]
);
const trackTelClick = useCallback(() => {
matopush(["trackEvent", "contact", "click_phone_number"]);
}, []);

render() {
const department = this.state.departmentData
? DepartmentComponent(this.state.departmentData)
: null;
useEffect(() => {
matopush([
"trackEvent",
"contact",
"click_contact_sr_modale",
router.asPath
]);
}, [router.asPath]);

return (
<>
<Heading as="h4">Contact téléphonique</Heading>
<NumberInsert href="tel:+0033806000126">
<Number>0 806 000 126</Number>
<Pricing>
Service gratuit <span>+ prix appel</span>
</Pricing>
</NumberInsert>
return (
<>
<Heading as="h4">Contact téléphonique</Heading>
<NumberInsert href="tel:+0033806000126" onClick={trackTelClick}>
<Number>0 806 000 126</Number>
<Pricing>
Service gratuit <span>+ prix appel</span>
</Pricing>
</NumberInsert>

<Heading as="h4">Contact par email et prise de rendez-vous</Heading>
<p>
<UID name={id => `id_${id}`}>
{id => (
<>
<label htmlFor={id}>
Saisissez votre numéro de département&nbsp;:
</label>
<StyledInput
id={id}
type="text"
name="search-service"
autoComplete="off"
maxLength="3"
placeholder="ex. 31, 35, 75"
onChange={this.onDepartmentInput}
/>
</>
)}
</UID>
</p>
{department}
<Small>
Attention, ces services délivrent une information juridique, ils ne
sont pas compétents pour :
<ul>
<li>{"les demandes d'intervention en entreprise"}</li>
<li>{"la constitution des dossiers prud’homaux"}</li>
<li>{"les calculs de droit au chômage"}</li>
<li>{"vous renseigner sur les cotisations sociales"}</li>
</ul>
</Small>
</>
);
}
<Heading as="h4">Contact par email et prise de rendez-vous</Heading>
<p>
<UID name={id => `id_${id}`}>
{id => (
<>
<label htmlFor={id}>
Saisissez votre numéro de département&nbsp;:
</label>
<StyledInput
id={id}
type="text"
name="search-service"
autoComplete="off"
maxLength="3"
placeholder="ex. 31, 35, 75"
onChange={onDepartmentInput}
/>
</>
)}
</UID>
</p>
{departementData && <DepartementLink departement={departementData} />}
<Small>
Attention, ces services délivrent une information juridique, ils ne sont
pas compétents pour :
<ul>
<li>{"les demandes d'intervention en entreprise"}</li>
<li>{"la constitution des dossiers prud’homaux"}</li>
<li>{"les calculs de droit au chômage"}</li>
<li>{"vous renseigner sur les cotisations sociales"}</li>
</ul>
</Small>
</>
);
}

export { ServiceRenseignement };
Original file line number Diff line number Diff line change
@@ -12,6 +12,10 @@ jest.mock(
{ virtual: true }
);

jest.mock("../../piwik", () => ({
matopush: jest.fn()
}));

describe("<ServiceRenseignement />", () => {
it("should render suggestions", async () => {
const { container, getByLabelText } = render(<ServiceRenseignement />);
Original file line number Diff line number Diff line change
@@ -3,6 +3,10 @@ import { render } from "@testing-library/react";
import { Button } from "@socialgouv/react-ui";
import { ServiceRenseignementModal } from "../ServiceRenseignementModal";

jest.mock("../../piwik", () => ({
matopush: jest.fn()
}));

describe("<ServiceRenseignementModal />", () => {
it("renders the given element", () => {
const { getByText } = render(
14 changes: 13 additions & 1 deletion packages/code-du-travail-frontend/src/layout/Footer.js
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ import {
import { ServiceRenseignementModal } from "../common/ServiceRenseignementModal";
import { ContactModal } from "../common/ContactModal";
import { useRouter } from "next/router";
import { matopush } from "../piwik";

const { DirectionRight: DirectionRightIcon } = icons;
const { publicRuntimeConfig } = getConfig();
@@ -94,7 +95,18 @@ const Footer = () => {
<StyledListItem>
<ContactModal>
{openModal => (
<Button variant="navLink" onClick={openModal}>
<Button
variant="navLink"
onClick={() => {
matopush([
"trackEvent",
"contact",
"click_contact_cdtn_team",
path
]);
openModal();
}}
>
Contact
</Button>
)}

0 comments on commit 36136ae

Please sign in to comment.