-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #110 from SocialGouv/feat-envoie-ressources
feat(ressources): redirection ressources
- Loading branch information
Showing
13 changed files
with
201 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
__tests__/components/ab-testing/give-access-to-resources.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { fireEvent, render, screen } from "@testing-library/react" | ||
| import { GiveAccessToResources } from "../../../src/components/ab-testing/resources/GiveAccessToResources" | ||
| import { STORAGE_TEST_ABC } from "../../../src/constants/constants" | ||
| import * as AbTestingUtils from "../../../src/utils/ab-testing/ab-testing.utils" | ||
|
|
||
| describe("UI de GiveAccessToResources", () => { | ||
| describe("TEST A/B/C/D", () => { | ||
| const mailBtnText = "Je souhaite recevoir les ressources par mail" | ||
| const linkBtnText = "Afficher les ressources disponibles" | ||
|
|
||
| test("Should return modal with email when test is A", async () => { | ||
| localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.A) | ||
| render(<GiveAccessToResources />) | ||
|
|
||
| const button = screen.getByRole("button", { name: mailBtnText }) | ||
| expect(button).toBeInTheDocument() | ||
|
|
||
| fireEvent.click(button) | ||
| expect(await screen.queryByText("Fermer")).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test("Should return modal with email when test is B", async () => { | ||
| localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.B) | ||
| render(<GiveAccessToResources />) | ||
|
|
||
| const button = screen.getByRole("button", { name: mailBtnText }) | ||
| expect(button).toBeInTheDocument() | ||
|
|
||
| fireEvent.click(button) | ||
| expect(await screen.queryByText("Fermer")).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test("Should return link when test is C", async () => { | ||
| localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.C) | ||
| render(<GiveAccessToResources />) | ||
|
|
||
| const button = screen.getByRole("button", { name: linkBtnText }) | ||
| expect(button).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test("Should return link when test is D", async () => { | ||
| localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.D) | ||
| render(<GiveAccessToResources />) | ||
|
|
||
| const button = screen.getByRole("button", { name: linkBtnText }) | ||
| expect(button).toBeInTheDocument() | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
129 changes: 129 additions & 0 deletions
129
src/components/ab-testing/resources/GiveAccessToResources.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import { Button } from "@dataesr/react-dsfr" | ||
| import { useEffect, useState } from "react" | ||
| import { Modal } from "react-bootstrap" | ||
| import { STORAGE_TEST_ABC } from "../../../constants/constants" | ||
| import * as StorageUtils from "../../../utils/storage.utils" | ||
| import * as AbTestingUtils from "../../../utils/ab-testing/ab-testing.utils" | ||
| import { client, DEMANDE_RESSOURCES } from "../../../../apollo-client" | ||
| import { useMutation } from "@apollo/client" | ||
| import { LoaderFoButton } from "../../../utils/main.utils" | ||
|
|
||
| export const GiveAccessToResources = () => { | ||
| const RESOURCES_URL = process.env.NEXT_PUBLIC_LANDING_PAGE_BLUES_RESOURCES | ||
| const test = StorageUtils.getInLocalStorage(STORAGE_TEST_ABC) | ||
|
|
||
| const [show, setShow] = useState(false) | ||
| const [isLoading, setLoading] = useState(false) | ||
| const [mailValue, setMailValue] = useState() | ||
|
|
||
| const openUrl = (url) => window.open(url, "_blank") | ||
| const handleChange = (event) => setMailValue(event.target.value) | ||
| const openModal = () => setShow(true) | ||
| const closeModal = () => setShow(false) | ||
|
|
||
| const shouldSendEmail = () => | ||
| test === AbTestingUtils.TEST.A || test === AbTestingUtils.TEST.B | ||
|
|
||
| useEffect(() => { | ||
| shouldSendEmail() | ||
| ? AbTestingUtils.trackerForAbTesting( | ||
| "Je souhaite recevoir les ressources par mail" | ||
| ) | ||
| : AbTestingUtils.trackerForAbTesting( | ||
| "Afficher les ressources disponibles" | ||
| ) | ||
| }, []) | ||
|
|
||
| const componentForRedirection = () => { | ||
| return ( | ||
| <Button | ||
| className="fr-btn--secondary" | ||
| onClick={() => openUrl(RESOURCES_URL)} | ||
| > | ||
| Afficher les ressources disponibles | ||
| </Button> | ||
| ) | ||
| } | ||
|
|
||
| const [sendResourcesQuery] = useMutation(DEMANDE_RESSOURCES, { | ||
| client: client, | ||
| onCompleted: () => { | ||
| setLoading(false) | ||
| closeModal() | ||
| }, | ||
| onError: (err) => { | ||
| console.error(err) | ||
| setLoading(false) | ||
| }, | ||
| }) | ||
|
|
||
| const sendMail = async () => { | ||
| setLoading(false) | ||
| AbTestingUtils.trackerForAbTesting( | ||
| "Je souhaite recevoir les ressources par mail - Envoie du mail" | ||
| ) | ||
|
|
||
| setLoading(true) | ||
| await sendResourcesQuery({ | ||
| variables: { | ||
| email: mailValue, | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| const componentToSendMail = () => { | ||
| return ( | ||
| <div> | ||
| <Button className="fr-btn--secondary" onClick={() => openModal()}> | ||
| Je souhaite recevoir les ressources par mail | ||
| </Button> | ||
|
|
||
| <Modal show={show} centered size="lg"> | ||
| <Modal.Header className="fr-modal__header"> | ||
| <button | ||
| className="fr-btn--close fr-btn" | ||
| aria-controls="fr-modal-2" | ||
| onClick={closeModal} | ||
| > | ||
| Fermer | ||
| </button> | ||
| </Modal.Header> | ||
|
|
||
| <Modal.Body> | ||
| <div className="fr-input-group"> | ||
| <label className="fr-label" htmlFor="email-resources"> | ||
| Recevez nos ressources orientées sur les difficultés maternelles | ||
| dans votre boite mail | ||
| <span className="fr-hint-text"> | ||
| Format attendu : [email protected] | ||
| </span> | ||
| </label> | ||
| <input | ||
| className="fr-input" | ||
| name="email" | ||
| autoComplete="email" | ||
| id="email-resources" | ||
| type="email" | ||
| onChange={handleChange} | ||
| value={mailValue} | ||
| /> | ||
| </div> | ||
| </Modal.Body> | ||
|
|
||
| <Modal.Footer> | ||
| <Button onClick={() => sendMail()} disabled={isLoading}> | ||
| Envoyer | ||
| {isLoading ? <LoaderFoButton /> : null} | ||
| </Button> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| {shouldSendEmail() ? componentToSendMail() : componentForRedirection()} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters