Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(accompagnement): ajoute l‘icone téléphone et rend cliquable de numéro de téléphone #2685

Merged
merged 2 commits into from
Feb 14, 2024
Merged

feat(accompagnement): ajoute l‘icone téléphone et rend cliquable de numéro de téléphone #2685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a8c1e7
feat(accompagnement): ajoute l‘icone téléphone et rend cliquable de n…
juliebrunetto83 Feb 12, 2024
d37caea
feat(accompagnement): retour review
juliebrunetto83 Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions .../features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnement.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,17 +57,31 @@ $color-summary-hover: utilities.$color-cta-background-primary-hover;

.tags {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0;

@include utilities.media(large) {
margin-block: 1rem;
}

& .telephone {
text-decoration: none;
display: flex;
gap: 0.25rem;
align-items: center;

& svg {
width: 1em;
height: 1em;
}
}
}

.contactMailÉtablissement {
color: $color-contact-mail;
margin-top: 1.25rem;
font-weight: bold;
text-decoration: none;

@include utilities.media(large) {
align-self: flex-start;
Expand All @@ -76,7 +90,6 @@ $color-summary-hover: utilities.$color-cta-background-primary-hover;

.contactFormulaireÉtablissement {
margin-top: 1.25rem;
font-weight: bold;
align-self: start;
font-size: 1rem;
width: 100%;
Expand Down
60 changes: 33 additions & 27 deletions ...s/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementDesktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,16 @@ import {
} from '~/client/components/features/Accompagnement/Rechercher/Résultat/Horaires/HorairesRésultatRechercherAccompagnement';
import styles
from '~/client/components/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnement.module.scss';
import {
RésultatRechercherAccompagnementTagsList,
} from '~/client/components/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementTagsList';
import {
useAccompagnementLogo,
} from '~/client/components/features/Accompagnement/Rechercher/Résultat/useAccompagnementLogo';
import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
import { Card } from '~/client/components/ui/Card/Card';
import { Icon } from '~/client/components/ui/Icon/Icon';
import { Link } from '~/client/components/ui/Link/Link';
import { TagList } from '~/client/components/ui/Tag/TagList';
import { TextIcon } from '~/client/components/ui/TextIcon/TextIcon';
import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
import {
ÉtablissementAccompagnement,
TypeÉtablissement,
Expand All @@ -25,6 +26,8 @@ interface RésultatRechercherAccompagnementDesktopProps {
onContactClick(): void
}



export function RésultatRechercherAccompagnementDesktop(props: RésultatRechercherAccompagnementDesktopProps) {
const {
établissement,
Expand All @@ -45,39 +48,42 @@ export function RésultatRechercherAccompagnementDesktop(props: RésultatRecherc
{établissement.nom}
</Card.Title>
{établissement.adresse && <span className={styles.address}>{établissement.adresse}</span>}
<TagList list={[établissement.telephone, !isMissionLocale ? établissement.email : '']}
className={styles.tags}/>
<RésultatRechercherAccompagnementTagsList etablissement={établissement} />
</div>
{
établissement.email && !isMissionLocale &&
<Link href={`mailto:${établissement.email}`} className={styles.contactMailÉtablissement} title="Contacter l‘agence - adresse mail">
<TextIcon icon={'mail'} iconPosition={'right'}>Contacter l‘agence</TextIcon>
</Link>
<LinkStyledAsButtonWithIcon
appearance={'asQuaternaryButton'}
icon={<Icon name={'mail'}/>}
iconPosition={'right'}
href={`mailto:${établissement.email}`}
className={styles.contactMailÉtablissement}
title="Contacter l‘agence - adresse mail">
Contacter l‘agence
</LinkStyledAsButtonWithIcon>
}
{
établissement.email && isMissionLocale &&
<ButtonComponent
className={styles.contactFormulaireÉtablissement}
label={'Je souhaite être contacté(e)'}
appearance={'quaternary'}
iconPosition={'right'}
icon={<Icon name="mail" className={styles.buttonIcon}/>}
onClick={onContactClick}/>
<ButtonComponent
className={styles.contactFormulaireÉtablissement}
label={'Je souhaite être contacté(e)'}
appearance={'quaternary'}
onClick={onContactClick}/>
}
</div>
{établissement.horaires && établissement.horaires.length > 0 &&
<details className={styles.details}>
<summary className={styles.summary}>Voir les horaires d‘ouverture</summary>
<div className={styles.horaireBackground}>
<ol className={styles.listeHoraire}>
{établissement.horaires.map((horaire) => (
<li key={horaire.jour} className={styles.horaireElement}>
<HorairesRésultatRechercherAccompagnement horaire={horaire}/>
</li>
))}
</ol>
</div>
</details>
<details className={styles.details}>
<summary className={styles.summary}>Voir les horaires d‘ouverture</summary>
<div className={styles.horaireBackground}>
<ol className={styles.listeHoraire}>
{établissement.horaires.map((horaire) => (
<li key={horaire.jour} className={styles.horaireElement}>
<HorairesRésultatRechercherAccompagnement horaire={horaire}/>
</li>
))}
</ol>
</div>
</details>
}
</Card.Content>
</Card>
Expand Down
56 changes: 35 additions & 21 deletions ...ts/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,25 @@ import {
} from '~/client/components/features/Accompagnement/Rechercher/Résultat/Horaires/HorairesRésultatRechercherAccompagnement';
import styles
from '~/client/components/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnement.module.scss';
import { useAccompagnementLogo } from '~/client/components/features/Accompagnement/Rechercher/Résultat/useAccompagnementLogo';
import {
RésultatRechercherAccompagnementTagsList,
} from '~/client/components/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementTagsList';
import {
useAccompagnementLogo,
} from '~/client/components/features/Accompagnement/Rechercher/Résultat/useAccompagnementLogo';
import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
import { Card } from '~/client/components/ui/Card/Card';
import { Icon } from '~/client/components/ui/Icon/Icon';
import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
import { TagList } from '~/client/components/ui/Tag/TagList';
import {
ÉtablissementAccompagnement,
TypeÉtablissement,
} from '~/server/établissement-accompagnement/domain/etablissementAccompagnement';

interface RésultatRechercherAccompagnementMobileProps {
établissement: ÉtablissementAccompagnement
onContactClick(): void
établissement: ÉtablissementAccompagnement

onContactClick(): void
}

export function RésultatRechercherAccompagnementMobile(props: RésultatRechercherAccompagnementMobileProps) {
Expand All @@ -40,31 +46,39 @@ export function RésultatRechercherAccompagnementMobile(props: RésultatRecherch
{établissement.adresse && <span className={styles.address}>{établissement.adresse}</span>}
</div>
</Card.Content>
<TagList list={[établissement.telephone, !isMissionLocale ? établissement.email : '']} className={styles.tags}/>
<RésultatRechercherAccompagnementTagsList etablissement={établissement} />
juliebrunetto83 marked this conversation as resolved.
Show resolved Hide resolved
{
établissement.email && !isMissionLocale &&
<LinkStyledAsButtonWithIcon className={styles.contactFormulaireÉtablissement} href={`mailto:${établissement.email}`} appearance={'asPrimaryButton'} title="Contacter l‘agence - adresse mail">Contacter l‘agence</LinkStyledAsButtonWithIcon>
<LinkStyledAsButtonWithIcon
className={styles.contactFormulaireÉtablissement}
icon={<Icon name={'mail'}/>}
iconPosition={'right'}
href={`mailto:${établissement.email}`}
appearance={'asPrimaryButton'}
title="Contacter l‘agence - adresse mail">
Contacter l‘agence
</LinkStyledAsButtonWithIcon>
}
{
établissement.horaires && établissement.horaires.length > 0 &&
<details className={styles.details}>
<summary className={styles.summary}>Voir les horaires d‘ouverture</summary>
<ol className={styles.listeHoraire}>
{établissement.horaires?.map((horaire) => (
<li key={horaire.jour} className={styles.horaireElement}>
<HorairesRésultatRechercherAccompagnement horaire={horaire} />
</li>
))}
</ol>
</details>
<details className={styles.details}>
<summary className={styles.summary}>Voir les horaires d‘ouverture</summary>
<ol className={styles.listeHoraire}>
{établissement.horaires?.map((horaire) => (
<li key={horaire.jour} className={styles.horaireElement}>
<HorairesRésultatRechercherAccompagnement horaire={horaire}/>
</li>
))}
</ol>
</details>
}
{
établissement.email && isMissionLocale &&
<ButtonComponent
label={'Je souhaite être contacté(e)'}
className={styles.contactFormulaireÉtablissement}
onClick={onContactClick}
/>
<ButtonComponent
label={'Je souhaite être contacté(e)'}
className={styles.contactFormulaireÉtablissement}
onClick={onContactClick}
/>
}
</Card>
);
Expand Down
57 changes: 57 additions & 0 deletions ...ures/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementTagsList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/**
* @jest-environment jsdom
*/


import { render, screen } from '@testing-library/react';

import {
RésultatRechercherAccompagnementTagsList,
} from '~/client/components/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementTagsList';
import { TypeÉtablissement } from '~/server/établissement-accompagnement/domain/etablissementAccompagnement';
import {
anÉtablissementAccompagnement,
} from '~/server/établissement-accompagnement/domain/etablissementAccompagnement.fixture';

describe('<RésultatRechercherAccompagnementTagsList/>', () => {
it('je vois la liste des tags', () => {
render(<RésultatRechercherAccompagnementTagsList
etablissement={anÉtablissementAccompagnement({ telephone: '0601010101' })}/>);

expect(screen.getByRole('list')).toBeVisible();
});

describe('téléphone', () => {
it('lorsque le téléphone n‘est pas présent je ne vois pas de téléphone', () => {
render(<RésultatRechercherAccompagnementTagsList
etablissement={anÉtablissementAccompagnement({ telephone: undefined })}/>);
expect(screen.queryByRole('listitem', { name: 'téléphone de l‘établissement' })).not.toBeInTheDocument();
});

it('lorsque le téléphone est présent, je vois le lien de contact par téléphone', () => {
render(<RésultatRechercherAccompagnementTagsList
etablissement={anÉtablissementAccompagnement({ telephone: '0601010101' })}/>);
expect(screen.getByRole('link', { name: '0601010101' })).toHaveAttribute('href', 'tel:0601010101');
});
});

describe('email', () => {
it('lorsque l‘établissement est mission locale, je n‘affiche pas le mail', () => {
render(<RésultatRechercherAccompagnementTagsList
etablissement={anÉtablissementAccompagnement({ email: '[email protected]', type: TypeÉtablissement.MISSION_LOCALE })}/>);
expect(screen.queryByRole('listitem', { name: 'email de l‘établissement' })).not.toBeInTheDocument();
});

it('lorsque l‘établissement n‘est pas mission locale et que l‘email n‘est pas présent, je ne vois pas d‘email', () => {
render(<RésultatRechercherAccompagnementTagsList
etablissement={anÉtablissementAccompagnement({ email: undefined, type: TypeÉtablissement.INFO_JEUNE })}/>);
expect(screen.queryByRole('listitem', { name: 'email de l‘établissement' })).not.toBeInTheDocument();
});

it('lorsque l‘établissement n‘est pas mission locale et que l‘email est présent, je vois l‘adresse email', () => {
render(<RésultatRechercherAccompagnementTagsList
etablissement={anÉtablissementAccompagnement({ email: '[email protected]', type: TypeÉtablissement.INFO_JEUNE })}/>);
expect(screen.getByRole('listitem', { name: 'email de l‘établissement' })).toHaveTextContent('[email protected]');
});
});
});
32 changes: 32 additions & 0 deletions .../features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnementTagsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import styles
from '~/client/components/features/Accompagnement/Rechercher/Résultat/RésultatRechercherAccompagnement.module.scss';
import { Icon } from '~/client/components/ui/Icon/Icon';
import { Link } from '~/client/components/ui/Link/Link';
import { Tag } from '~/client/components/ui/Tag/Tag';
import {
ÉtablissementAccompagnement,
TypeÉtablissement,
} from '~/server/établissement-accompagnement/domain/etablissementAccompagnement';

interface tagsListProps {
etablissement: ÉtablissementAccompagnement
}

export function RésultatRechercherAccompagnementTagsList({ etablissement }: tagsListProps) {
const isMissionLocale = etablissement.type === TypeÉtablissement.MISSION_LOCALE;

return <ul className={styles.tags}>
{etablissement.telephone &&
<li key="téléphone" aria-label="téléphone de l‘établissement">
<Tag>
<Link href={`tel:${etablissement.telephone}`} className={styles.telephone}>
<Icon name="phone"/>{etablissement.telephone}
</Link>
</Tag>
</li>}
{!isMissionLocale && etablissement.email &&
<li key="mail" aria-label="email de l‘établissement">
<Tag>{etablissement.email}</Tag>
</li>}
</ul>;
}
47 changes: 47 additions & 0 deletions src/server/établissement-accompagnement/domain/etablissementAccompagnement.fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1332,6 +1332,53 @@ export function aMissionLocaleÉtablissementAccompagnement(): ÉtablissementAcco
};
}

export function anÉtablissementAccompagnement(override?: Partial<ÉtablissementAccompagnement>): ÉtablissementAccompagnement {
return {
adresse: '93 rue Jeanne-d‘Arc, 75013 Paris',
email: '[email protected]',
horaires: [
{
heures: [
{
début: '10:30:00',
fin: '13:00:00',
},
{
début: '14:00:00',
fin: '19:00:00',
},
],
jour: 'Lundi',
},
{
heures: [],
jour: 'Mardi',
},
{
heures: [],
jour: 'Mercredi',
},
{
heures: [],
jour: 'Jeudi',
},
{
heures: [],
jour: 'Vendredi',
},
{
heures: [],
jour: 'Samedi',
},
juliebrunetto83 marked this conversation as resolved.
Show resolved Hide resolved
],
id: '11c63eb2-68b3-40dc-828e-33c212686173',
nom: 'Mission locale pour l‘insertion professionnelle et sociale des jeunes (16-25 ans) - Paris - 5e 12e et 13e arrondissements',
telephone: '01 45 85 20 50',
juliebrunetto83 marked this conversation as resolved.
Show resolved Hide resolved
type: TypeÉtablissement.MISSION_LOCALE,
...override,
};
}

export function aMissionLocaleÉtablissementAccompagnementList(): ÉtablissementAccompagnement[] {
return [
aMissionLocaleÉtablissementAccompagnement(),
Expand Down