Skip to content

Commit

Permalink
swap only for 2 urls
Browse files Browse the repository at this point in the history
  • Loading branch information
@carolineBda
carolineBda committed Jul 20, 2023
1 parent 633c704 commit fc292d0
Show file tree
Hide file tree
Showing 6 changed files with 436 additions and 116 deletions.
30 changes: 17 additions & 13 deletions packages/code-du-travail-frontend/pages/contribution/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { Breadcrumb } from "@socialgouv/cdtn-utils";
import { handleError } from "../../src/lib/fetch-error";
import { SITE_URL } from "../../src/config";
import ContributionGeneric from "../../src/contributions/ContributionGeneric";
import ContributionCC from "../../src/contributions/ContributionCC";
import showNewContribPage from "../../src/contributions/slugFilter";

const fetchQuestion = ({ slug }) =>
fetch(`${SITE_URL}/api/items/contributions/${slug}`);
Expand Down Expand Up @@ -44,14 +46,7 @@ const buildTitleAndDescription = (
title,
};
};

const SLUG_FOR_POC = [
"les-conges-pour-evenements-familiaux",
"quelle-est-la-duree-de-preavis-en-cas-de-licenciement",
];
const showNewContribPage = (slug): boolean => {
return SLUG_FOR_POC.indexOf(slug) >= 0;
};
const SLUG_FOR_POC_GENERIC = ["les-conges-pour-evenements-familiaux"];

function PageContribution(props: Props): JSX.Element {
const {
Expand All @@ -78,17 +73,26 @@ function PageContribution(props: Props): JSX.Element {
relatedItems={relatedItems}
breadcrumbs={breadcrumbs}
>
{showNewContribPage(slug) ? (
{SLUG_FOR_POC_GENERIC.indexOf(slug) >= 0 ? (
<ContributionGeneric
answers={answers}
slug={slug}
content={(content && content._source) || {}}
/>
) : (
<Contribution
answers={answers}
content={(content && content._source) || {}}
/>
<>
{showNewContribPage(slug) ? (
<ContributionCC
answers={answers}
content={(content && content._source) || {}}
/>
) : (
<Contribution
answers={answers}
content={(content && content._source) || {}}
/>
)}
</>
)}
</Answer>
</Layout>
Expand Down
248 changes: 149 additions & 99 deletions packages/code-du-travail-frontend/src/contributions/Contribution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
Badge,
Button,
icons,
IconStripe,
InsertTitle,
Paragraph,
Section,
theme,
Expand Down Expand Up @@ -50,113 +52,40 @@ const Contribution = ({ answers, content }) => {
(answer) => parseInt(answer.idcc, 10) === convention.num
);
}
// ensure we have valid data in ccInfo
return (
<>
{hasConventionAnswers && (
<>
<Badge />
<section>
<Wrapper variant="dark">
<Title shift={spacings.xmedium} variant="primary">
{isConventionalAnswer ? (
<>
Que dit la convention <i>{conventionAnswer.shortName}</i>
&nbsp;?
</>
) : (
<>Que dit votre convention collective&nbsp;?</>
)}
</Title>
{!isConventionDetected() && !isConventionalAnswer ? (
<SearchConvention onSelectConvention={setConvention} />
<CustomWrapper variant="dark">
<IconStripe icon={icons.Custom}>
<StyledInsertTitle as="p">Page personnalisable</StyledInsertTitle>
{isConventionDetected() || isConventionalAnswer ? (
<Paragraph noMargin>
Cette page a été personnalisée avec l’ajout des{" "}
<a href="#customisation">
informations de la convention collective :{" "}
{isConventionalAnswer
? conventionAnswer.shortName
: convention.shortTitle}
</a>
</Paragraph>
) : (
<>
{!isConventionalAnswer && (
<>
<StyledParagraph noMargin>
Ce contenu est personnalisé avec les informations de la
convention collective&nbsp;:
</StyledParagraph>
<Toast
variant="secondary"
onRemove={() => setConvention()}
>
{convention.shortTitle}
{convention.highlight &&
convention.highlight.searchInfo && (
<Paragraph variant="altText" noMargin>
{convention.highlight.searchInfo}
</Paragraph>
)}
</Toast>
</>
)}
{conventionAnswer ? (
<>
{conventionAnswer.highlight &&
conventionAnswer.highlight.content && (
<StyledAlert variant="primary">
<StyledParagraph
variant="primary"
fontSize="small"
fontWeight="700"
noMargin
>
{conventionAnswer.highlight.title}
</StyledParagraph>
<Paragraph fontSize="small" noMargin>
<Html>{conventionAnswer.highlight.content}</Html>
</Paragraph>
</StyledAlert>
)}
<MdxWrapper>
<Mdx
markdown={conventionAnswer.markdown}
components={rehypeToReact}
/>
</MdxWrapper>

<ReferencesJuridiques
references={conventionAnswer.references}
/>
<p>
Consultez les questions-réponses fréquentes pour{" "}
<a
href={`/convention-collective/${
isConventionalAnswer
? conventionAnswer.slug
: convention.slug
}`}
>
la convention collective{" "}
{isConventionalAnswer
? conventionAnswer.shortName
: convention.shortTitle}
</a>
</p>
</>
) : (
<Section>
Désolé, nous n’avons pas de réponse pour cette convention
collective.
</Section>
)}
{!isConventionalAnswer && (
<ButtonWrapper>
<Button variant="primary" onClick={() => setConvention()}>
Changer de convention collective
<StyledCloseIcon />
</Button>
</ButtonWrapper>
)}
</>
<Paragraph noMargin>
Le contenu de cette page peut être personnalisé en fonction de
votre situation.
<br />
<a href="#customisation">Voir en bas de page</a> pour
renseigner votre convention collective.
</Paragraph>
)}
</Wrapper>
</section>
</IconStripe>
</CustomWrapper>
</>
)}
{answers.generic && (
<Section>
<section>
<Title stripe="left">Que dit le code du travail&nbsp;?</Title>
{content && (
<Meta>
Expand All @@ -178,15 +107,116 @@ const Contribution = ({ answers, content }) => {
{content.date && <span>Mis à jour le&nbsp;: {content.date}</span>}
</Meta>
)}

<Mdx
markdown={answers.generic.markdown}
components={rehypeToReact(content)}
/>
<ReferencesJuridiques
references={filteredRefs(answers?.generic?.references, content.url)}
/>
</Section>
</section>
)}
{hasConventionAnswers && (
<StyledSection>
<Wrapper variant="dark">
<StyledTitle
shift={spacings.xmedium}
variant="primary"
hasMarginTop={Boolean(answers.generic)}
id="customisation"
>
{isConventionalAnswer ? (
<>
Que dit la convention <i>{conventionAnswer.shortName}</i>
&nbsp;?
</>
) : (
<>Que dit votre convention collective&nbsp;?</>
)}
</StyledTitle>
{!isConventionDetected() && !isConventionalAnswer ? (
<SearchConvention onSelectConvention={setConvention} />
) : (
<>
{!isConventionalAnswer && (
<>
<StyledParagraph noMargin>
Ce contenu est personnalisé avec les informations de la
convention collective&nbsp;:
</StyledParagraph>
<Toast variant="secondary" onRemove={() => setConvention()}>
{convention.shortTitle}
{convention.highlight &&
convention.highlight.searchInfo && (
<Paragraph variant="altText" noMargin>
{convention.highlight.searchInfo}
</Paragraph>
)}
</Toast>
</>
)}
{conventionAnswer ? (
<>
{conventionAnswer.highlight &&
conventionAnswer.highlight.content && (
<StyledAlert variant="primary">
<StyledParagraph
variant="primary"
fontSize="small"
fontWeight="700"
noMargin
>
{conventionAnswer.highlight.title}
</StyledParagraph>
<Paragraph fontSize="small" noMargin>
<Html>{conventionAnswer.highlight.content}</Html>
</Paragraph>
</StyledAlert>
)}
<MdxWrapper>
<Mdx
markdown={conventionAnswer.markdown}
components={rehypeToReact}
/>
</MdxWrapper>

<ReferencesJuridiques
references={conventionAnswer.references}
/>
<p>
Consultez les questions-réponses fréquentes pour{" "}
<a
href={`/convention-collective/${
isConventionalAnswer
? conventionAnswer.slug
: convention.slug
}`}
>
la convention collective{" "}
{isConventionalAnswer
? conventionAnswer.shortName
: convention.shortTitle}
</a>
</p>
</>
) : (
<Section>
Désolé, nous n’avons pas de réponse pour cette convention
collective.
</Section>
)}
{!isConventionalAnswer && (
<ButtonWrapper>
<Button variant="primary" onClick={() => setConvention()}>
Changer de convention collective
<StyledCloseIcon />
</Button>
</ButtonWrapper>
)}
</>
)}
</Wrapper>
</StyledSection>
)}
</>
);
Expand All @@ -212,10 +242,30 @@ const MdxWrapper = styled.div`
margin-bottom: ${spacings.medium};
`;

const StyledInsertTitle = styled(InsertTitle).attrs({
"aria-level": "2",
role: "heading",
})``;

const StyledSection = styled(Section)`
padding-bottom: 0;
`;

const CustomWrapper = styled(Wrapper)`
margin-bottom: ${spacings.large};
@media (max-width: ${breakpoints.mobile}) {
margin-bottom: ${spacings.medium};
}
`;

const StyledParagraph = styled(Paragraph)`
margin-bottom: ${spacings.tiny};
`;

const StyledTitle = styled(Title)`
margin-top: ${({ hasMarginTop }) => (hasMarginTop ? spacings.large : "0")};
`;

const ButtonWrapper = styled.div`
margin: ${spacings.base} 0 !important;
text-align: center;
Expand Down
Loading

0 comments on commit fc292d0

Please sign in to comment.