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: add visibility toggle in sourcing side panel component #298

Merged
merged 2 commits into from
Dec 5, 2024
Merged

feat: add visibility toggle in sourcing side panel component #298

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
b1a9bf4
feat: add visibility toggle in sourcing side panel component
rtaieb Dec 3, 2024
58533c2
feat: refacto projet visibility component
mehdilouraoui Dec 5, 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
112 changes: 69 additions & 43 deletions src/components/common/projet-visibility.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,64 +7,90 @@ type ProjetVisibilityProps = {
isLoading?: boolean;
onVisibilityChange: (_checked: boolean) => void;
disabled?: boolean;
reduced?: boolean;
};

export const ProjetVisibility = ({ isPublic, isLoading, onVisibilityChange, disabled }: ProjetVisibilityProps) => {
return (
<div className="mb-14 mt-16 rounded-[20px] bg-dsfr-background-default-grey-hover p-8">
{!isLoading ? (
<p
className={clsx(
"fr-badge fr-badge--sm fr-badge--no-icon mb-2",
isPublic ? "fr-badge--success" : "!text-dsfr-background-flat-red-marianne",
)}
>
{isPublic ? (
<Image src="/images/sourcing/sourcing-france-visible.svg" className="mr-1" width={11} height={11} alt="" />
) : (
<svg xmlns="http://www.w3.org/2000/svg" className="mr-1 size-3" viewBox="0 0 24 24" fill="currentColor">
{/* eslint-disable-next-line max-len */}
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path>
</svg>
)}
{isPublic ? "Visible" : "Masqué"} {"sur l'annuaire des projets"}
</p>
export const ProjetVisibility = ({
isPublic,
isLoading,
onVisibilityChange,
disabled,
reduced = false,
}: ProjetVisibilityProps) => {
const Badge = !isLoading ? (
<p
className={clsx(
"fr-badge fr-badge--sm fr-badge--no-icon mb-2",
isPublic ? "fr-badge--success" : "!text-dsfr-background-flat-red-marianne",
reduced && "h-fit",
)}
>
{isPublic ? (
<Image src="/images/sourcing/sourcing-france-visible.svg" className="mr-1" width={11} height={11} alt="" />
) : (
<div className="mb-2 h-[1.3575rem] w-[265px] animate-pulse rounded bg-dsfr-contrast-grey"></div>
<svg xmlns="http://www.w3.org/2000/svg" className="mr-1 size-3" viewBox="0 0 24 24" fill="currentColor">
{/* eslint-disable-next-line max-len */}
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path>
</svg>
)}
{isPublic ? "Visible" : "Masqué"} {reduced ? "sur l'annuaire" : "sur l'annuaire des projets"}
</p>
) : (
<div className="mb-2 h-[1.3575rem] w-[265px] animate-pulse rounded bg-dsfr-contrast-grey"></div>
);

const Toggle = !isLoading ? (
<div className="[&>div]:-mr-8">
<ToggleSwitch
labelPosition="right"
label=""
inputTitle=""
showCheckedHint={false}
checked={isPublic ?? undefined}
disabled={disabled}
onChange={onVisibilityChange}
/>
</div>
) : (
<div className="-mr-8 h-6 w-[72px] rounded-full py-4">
<div className="h-6 w-10 rounded-full bg-dsfr-contrast-grey"></div>
</div>
);

if (reduced) {
return (
<div className="rounded-[20px] bg-dsfr-background-default-grey-hover px-4 pt-4">
<div className="mb-1 text-lg font-bold">
Souhaitez-vous rendre votre projet visible par les autres membres de la communauté Plus fraîche ma ville ?
</div>
<div className="flex items-center justify-between">
{Badge}
{Toggle}
</div>
</div>
);
}

return (
<div className="mb-14 mt-16 rounded-[20px] bg-dsfr-background-default-grey-hover p-8">
{Badge}
<div className="flex justify-between">
<div className="flex max-w-4xl flex-col gap-4 [&>p]:mb-0">
<p className="max-w-2xl text-xl font-bold">
Souhaitez-vous rendre votre projet visible par les autres membres de la communauté Plus fraîche ma ville ?
</p>
<p>
Rendez votre projet visible dans {"l'annuaire"} des projets pour partager son objet, sa localisation et son
état d’avancement aux autres membres de la communauté. Grâce à cette fonctionnalité, découvrez les
initiatives voisines, échangez avec d’autres porteurs de projet, et obtenez des contacts de prestataires.
Rendez votre projet visible dans {`l'annuaire`} des projets pour partager son objet, sa localisation et son
état {`d'avancement`} aux autres membres de la communauté. Grâce à cette fonctionnalité, découvrez les
initiatives voisines, échangez avec {`d'autres`} porteurs de projet, et obtenez des contacts de
prestataires.
</p>
<p>
En tant qu’administrateur d’un projet, vos prénom, nom et adresse mail seront partagés avec les utilisateurs
connectés.
En tant {`qu'administrateur`} {`d'un`} projet, vos prénom, nom et adresse mail seront partagés avec les
utilisateurs connectés.
</p>
</div>
{!isLoading ? (
<div className="[&>div]:-mr-8">
<ToggleSwitch
labelPosition="right"
label=""
inputTitle=""
showCheckedHint={false}
checked={isPublic ?? undefined}
disabled={disabled}
onChange={onVisibilityChange}
/>
</div>
) : (
<div className="-mr-8 h-6 w-[72px] rounded-full py-4">
<div className="h-6 w-10 rounded-full bg-dsfr-contrast-grey"></div>
</div>
)}
{Toggle}
</div>
</div>
);
Expand Down
4 changes: 4 additions & 0 deletions src/components/sourcing/map/sourcing-map-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ const SourcingMapClient = ({ markers, setSelectedMarker, selectedMarker, mapFocu
setSelectedMarker(selectedMarker);
};

if (!currentProjetCoordinates) {
return null;
}

return (
<div className="flex">
<div className="h-[715px] w-full max-w-[50rem]">
Expand Down
24 changes: 17 additions & 7 deletions src/components/sourcing/side-panel/sourcing-user-projet-location.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
import Image from "next/image";
import { SourcingProjetVisibility } from "@/src/components/sourcing/sourcing-projet-visibility";
import { useProjetsStore } from "@/src/stores/projets/provider";
import { useIsLecteur } from "@/src/hooks/use-is-lecteur";

export const SourcingUserProjetLocation = () => {
const currentProjet = useProjetsStore((state) => state.getCurrentProjet());
const isLecteur = useIsLecteur(currentProjet?.id);
return (
<div className="flex h-full flex-col items-center justify-center px-9">
<Image src="/images/sourcing/sourcing-my-location.svg" width={80} height={80} alt="" className="mb-4" />
<h2 className="mb-4 text-lg">Votre projet</h2>
<p className="mb-7 text-center">Vous êtes sur le point de géolocalisation de votre projet.</p>
<p className="mb-1 text-center">
{"Pour découvrir d'autres prestataires, cliquez sur les autres projets à proximité."}
</p>
<div className="flex h-full flex-col justify-between">
<div className="m-auto flex flex-col items-center px-9">
<Image src="/images/sourcing/sourcing-my-location.svg" width={80} height={80} alt="" className="mb-4" />
<h2 className="mb-4 text-lg">Votre projet</h2>
<p className="mb-7 text-center">Vous êtes sur le point de géolocalisation de votre projet.</p>
<p className="mb-1 text-center">
{"Pour découvrir d'autres prestataires, cliquez sur les autres projets à proximité."}
</p>
</div>
<div className="px-4 pb-2">
<SourcingProjetVisibility isLecteur={isLecteur} reduced />
</div>
</div>
);
};
3 changes: 2 additions & 1 deletion src/components/sourcing/sourcing-projet-visibility.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useProjetsStore } from "@/src/stores/projets/provider";
import { notifications } from "../common/notifications";
import { ProjetVisibility } from "../common/projet-visibility";

export const SourcingProjetVisibility = ({ isLecteur }: { isLecteur: boolean }) => {
export const SourcingProjetVisibility = ({ isLecteur, reduced = false }: { isLecteur: boolean; reduced?: boolean }) => {
const currentProjet = useProjetsStore((state) => state.getCurrentProjet());
const isPublic = currentProjet?.is_public;
const projetId = currentProjet?.id;
Expand All @@ -27,6 +27,7 @@ export const SourcingProjetVisibility = ({ isLecteur }: { isLecteur: boolean })
disabled={isLecteur}
isLoading={!currentProjet}
onVisibilityChange={handleVisibility}
reduced={reduced}
/>
);
};
Loading