Skip to content

Commit

Permalink
feat: refont home page + login/access pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@ImenOuidou
ImenOuidou committed Nov 12, 2023
1 parent 4dfba99 commit bad784c
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 225 deletions.
108 changes: 7 additions & 101 deletions src/client/src/components/DataSheets/Sections/Enterprise/Header/EnterpriseHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,22 @@ import { Helmet } from "react-helmet";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

import { formatSiren } from "../../../../../helpers/utils";
import {
resetSearch,
setSearchFilters,
setSearchTerm,
} from "../../../../../services/Store/actions";
import {
getClosingDate,
getName,
getOpeningDate,
getSiren,
isActive,
} from "../../../../../utils/entreprise/entreprise";
import {
getEtablissementsCount,
getEtablissementsFermesCount,
} from "../../../../../utils/establishment/establishment";
import { plural } from "../../../../../utils/plural/plural";
import BadgeWithIcon from "../../../../shared/Badge/BadgeWithIcon.jsx";
import { getName, getSiren } from "../../../../../utils/entreprise/entreprise";
import Download from "../../../../shared/Icons/Download.jsx";
import InfoBox from "../../../../shared/InfoBox";
import Value from "../../../../shared/Value";
import { useEstablishmentHeaderNumData } from "../../Establishment/Header/EstablishmentHeader.gql";
import AnnuaireEntreprisesLink from "./AnnuaireEntreprisesLink";
import HeaderInfoBloc from "../../Establishment/Header/HeaderInfoBloc.jsx";

const EnterpriseHeader = ({ enterprise }) => {
const { data: etablissementCount } = useEstablishmentHeaderNumData(
getSiren(enterprise)
);

const stateClass = isActive(enterprise) ? "icon--success" : "icon--danger";
const stateText = isActive(enterprise) ? "ouvert" : "fermé";
const etablissementsCount = etablissementCount
? getEtablissementsCount(etablissementCount)
: 0;
const etablissementsFermesCount = etablissementCount
? getEtablissementsFermesCount(etablissementCount)
: 0;
return (
<section id="header" className="data-sheet-header">
<>
Expand All @@ -53,85 +31,13 @@ const EnterpriseHeader = ({ enterprise }) => {
<Value value={getName(enterprise) || null} empty=" " />
</h1>
</>
<div className="columns">
<div className="column data-sheet-header-top">
<InfoBox value="Entreprise" />
<p className="data-sheet-header-top-count">
<>
<Value value={etablissementsCount} empty="Aucun " />{" "}
{plural({
count: etablissementsCount,
plural: " établissements ",
singular: " établissement ",
})}
{etablissementsFermesCount > 0 && (
<>
<span>
dont {etablissementsFermesCount}{" "}
{plural({
count: etablissementsFermesCount,
plural: "fermés",
singular: "fermé",
})}
</span>
</>
)}
</>
</p>
</div>
</div>

<div className="columns is-vcentered data-sheet-header__primary-infos">
<div className="column is-6 data-sheet-header__siren">
<span>SIREN : </span>
<span>
<Value value={formatSiren(getSiren(enterprise))} empty="" />
</span>
</div>
<HeaderInfoBloc
infoBoxValue={"Entreprise"}
enterprise={enterprise}
etablissementCount={etablissementCount}
/>

<div className="column text-left is-6 data-sheet-header__enterprise-external-link ">
<span className="data-sheet-header__bloc_link ">
Voir sur <AnnuaireEntreprisesLink siren={getSiren(enterprise)} />
</span>
</div>
</div>

<div className="columns ">
<div className="column is-6">
<div className="data-sheet-header__bloc">
<div className="data-sheet-header__status">
<div className="data-sheet-header__status-icon">
<BadgeWithIcon text={stateText} state={stateClass} />
</div>

<div className="data-sheet-header__status-date ">
<span>
<span className="data-sheet-header__status__print">
{stateText}
</span>{" "}
depuis le{" "}
<Value
datecreationetablissement
value={
isActive(enterprise)
? getOpeningDate(enterprise)
: getClosingDate(enterprise)
}
empty=""
/>
</span>

{!isActive(enterprise) && (
<div className="data-sheet-header__status-closed">
Date de création:{" "}
<Value value={getOpeningDate(enterprise)} empty="" />
</div>
)}
</div>
</div>
</div>
</div>
</div>
<div className="columns">
<div className="column ">
<div className="data-sheet-header__bloc">
Expand Down
131 changes: 9 additions & 122 deletions src/client/src/components/DataSheets/Sections/Establishment/Header/EstablishmentHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,149 +2,36 @@ import PropTypes from "prop-types";
import React from "react";

import { renderIfSiret } from "../../../../../helpers/hoc/renderIfSiret";
import { formatSiren } from "../../../../../helpers/utils";
import {
getNafCode,
getNafLabel,
} from "../../../../../utils/entreprise/entreprise";
import {
getAdresse,
getCategoryLabel,
getCodePostalAndCity,
getDateCreation,
getDateFermetureEtablissement,
getEtablissementsCount,
getEtablissementsFermesCount,
isActive,
} from "../../../../../utils/establishment/establishment";
import { plural } from "../../../../../utils/plural/plural";
import BadgeWithIcon from "../../../../shared/Badge/BadgeWithIcon.jsx";
import BuildingIcon from "../../../../shared/Icons/BuildingIcon.jsx";
import Download from "../../../../shared/Icons/Download.jsx";
import InfoBox from "../../../../shared/InfoBox";
import Value from "../../../../shared/Value";
import Dashboard from "../Dashboard";
import EntrepriseName from "./EntrepriseName";
import {
useEstablishmentHeaderData,
useEstablishmentHeaderNumData,
} from "./EstablishmentHeader.gql";
import HeaderInfoBloc from "./HeaderInfoBloc.jsx";

const EstablishmentHeader = ({ siret, siren }) => {
const { data: etablissement } = useEstablishmentHeaderData(siret);
const { data: etablissementCount } = useEstablishmentHeaderNumData(siren);
const adresse = getAdresse(etablissement);
const code = getCodePostalAndCity(etablissement);
const etablissementsCount = etablissementCount
? getEtablissementsCount(etablissementCount)
: 0;
const etablissementsFermesCount = etablissementCount
? getEtablissementsFermesCount(etablissementCount)
: 0;

const isEtablissementActive = isActive(etablissement);

const stateClass = isEtablissementActive ? "icon--success" : "icon--danger";
const stateText = isEtablissementActive ? "ouvert" : "fermé";
return (
<section id="header" className="data-sheet-header">
<EntrepriseName siret={siret} />
<div className="columns">
<div className="column data-sheet-header-top">
<InfoBox value={getCategoryLabel(etablissement)} />
<p className="data-sheet-header-top-count">
<>
<Value value={etablissementsCount} empty="Aucun " />{" "}
{plural({
count: etablissementsCount,
plural: " établissements ",
singular: " établissement ",
})}
{etablissementsFermesCount > 0 && (
<>
<span>
dont {etablissementsFermesCount}{" "}
{plural({
count: etablissementsFermesCount,
plural: "fermés",
singular: "fermé",
})}
</span>
</>
)}
</>
</p>
</div>
</div>
<div className="columns is-vcentered data-sheet-header__primary-infos">
<div className="column is-6 data-sheet-header__siret">
<span>SIRET : </span>
<span>
{formatSiren(siret.slice(0, 9))}
<span> {siret.slice(9)}</span>
</span>
</div>
<div className="data-sheet-header-address column is-6">
<span className="data-sheet-header-address-icon">
<BuildingIcon />
</span>
<span className="is-bold"> {code}</span>
<span className=" has-list-style">{adresse ? adresse : ""}</span>
</div>
</div>
<div className="columns">
<div className="column is-6">
<div className="data-sheet-header__bloc">
<div className="data-sheet-header__status">
<div className="data-sheet-header__status-icon">
<BadgeWithIcon text={stateText} state={stateClass} />
</div>
<div className="data-sheet-header__status-date ">
<span>
<span className="data-sheet-header__status__print">
{stateText}
</span>{" "}
depuis le{" "}
<Value
value={
isEtablissementActive
? getDateCreation(etablissement)
: getDateFermetureEtablissement(etablissement)
}
empty=""
datecreationetablissement
/>
</span>
</div>
</div>
{!isEtablissementActive && (
<div className="data-sheet-header__status-closed">
Date de création :{" "}
<Value value={getDateCreation(etablissement)} empty="" />
</div>
)}
<span className="data-sheet-header__bloc_link">
<Download />
<a
href={`https://api-avis-situation-sirene.insee.fr/identification/pdf/${siret}`}
rel="noreferrer noopener"
target="_blank"
>
Télécharger l’avis de situation SIRENE
</a>
</span>
</div>
</div>
<div className="column is-6 data-sheet-header__naf">
<span>
<Value value={getNafCode(etablissement)} empty="-" />{" "}
<Value
value={(getNafLabel(etablissement) || "").toLowerCase()}
empty=""
/>
</span>
</div>
</div>
<HeaderInfoBloc
etablissement={etablissement}
etablissementCount={etablissementCount}
infoBoxValue={getCategoryLabel(etablissement)}
siret={siret}
adresse={adresse}
code={code}
/>{" "}
<Dashboard siret={siret} />
</section>
);
Expand Down
Loading

0 comments on commit bad784c

Please sign in to comment.