Skip to content

Commit ae15527

Browse files
garronejgarronej
committed
Moving on
1 parent e2dcb3d commit ae15527

File tree

1 file changed

+94
-144
lines changed

1 file changed

+94
-144
lines changed

‎src/gdpr/ConsentBannerAndConsentManagement.tsx‎

Lines changed: 94 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
createProcessConsentChanges,
1616
createFullDenyFinalityConsent
1717
} from "./processConsentChanges";
18+
import { exclude } from "tsafe/exclude";
1819

1920
export function createConsentBannerAndConsentManagement<
2021
FinalityDescription extends Record<
@@ -439,6 +440,8 @@ function createConsentManagement<
439440
}) {
440441
const { title, description, subFinalities, finalityConsent, onChange } = props;
441442

443+
console.log(finalityConsent);
444+
442445
const { legendId, descriptionId, acceptInputId, refuseInputId, subFinalityDivId } =
443446
(function useClosure() {
444447
const id = useId();
@@ -456,18 +459,22 @@ function createConsentManagement<
456459
return { legendId, descriptionId, acceptInputId, refuseInputId, subFinalityDivId };
457460
})();
458461

459-
const macroState: "full consent" | "full refusal" | "partial consent" =
460-
typeof finalityConsent === "boolean"
461-
? finalityConsent
462+
const macroState = useMemo(
463+
(): "full consent" | "full refusal" | "partial consent" =>
464+
typeof finalityConsent === "boolean"
465+
? finalityConsent
466+
? "full consent"
467+
: "full refusal"
468+
: finalityConsent.isFullConsent
462469
? "full consent"
463-
: "full refusal"
464-
: finalityConsent.isFullConsent
465-
? "full consent"
466-
: "partial consent";
467-
468-
if (Date.now() < 0) {
469-
console.log(subFinalities, finalityConsent, onChange);
470-
}
470+
: Object.keys(finalityConsent)
471+
.filter(exclude("isFullConsent"))
472+
.map(subFinality => finalityConsent[subFinality])
473+
.includes(true)
474+
? "partial consent"
475+
: "full refusal",
476+
[finalityConsent]
477+
);
471478

472479
return (
473480
<div className={fr.cx("fr-consent-service")}>
@@ -512,144 +519,87 @@ function createConsentManagement<
512519
{description}
513520
</p>
514521
)}
515-
<div className={fr.cx("fr-consent-service__collapse")}>
516-
<button
517-
className={fr.cx("fr-consent-service__collapse-btn")}
518-
aria-expanded="false"
519-
aria-describedby={legendId}
520-
aria-controls={subFinalityDivId}
521-
>
522-
Voir plus de détails
523-
</button>
524-
</div>
525-
<div
526-
className={fr.cx("fr-consent-services", "fr-collapse")}
527-
id={subFinalityDivId}
528-
>
529-
<div className={fr.cx("fr-consent-service")}>
530-
<fieldset className={fr.cx("fr-fieldset", "fr-fieldset--inline")}>
531-
<legend
532-
id="finality-1-service-1-legend"
533-
className="fr-consent-service__title"
534-
>
535-
Sous finalité 1
536-
</legend>
537-
<div className="fr-consent-service__radios fr-fieldset--inline">
538-
<div className="fr-radio-group">
539-
<input
540-
type="radio"
541-
id="consent-finality-1-service-1-accept"
542-
name="consent-finality-1-service-1"
543-
/>
544-
<label
545-
className="fr-label"
546-
htmlFor="consent-finality-1-service-1-accept"
547-
>
548-
Accepter
549-
</label>
550-
</div>
551-
<div className="fr-radio-group">
552-
<input
553-
type="radio"
554-
id="consent-finality-1-service-1-refuse"
555-
name="consent-finality-1-service-1"
556-
/>
557-
<label
558-
className="fr-label"
559-
htmlFor="consent-finality-1-service-1-refuse"
560-
>
561-
Refuser
562-
</label>
563-
</div>
522+
{subFinalities !== undefined &&
523+
(assert(typeof finalityConsent !== "boolean"),
524+
(
525+
<>
526+
<div className={fr.cx("fr-consent-service__collapse")}>
527+
<button
528+
className={fr.cx("fr-consent-service__collapse-btn")}
529+
aria-expanded="false"
530+
aria-describedby={legendId}
531+
aria-controls={subFinalityDivId}
532+
>
533+
Voir plus de détails
534+
</button>
564535
</div>
565-
</fieldset>
566-
</div>
567-
<div className="fr-consent-service">
568-
<fieldset
569-
aria-labelledby="finality-1-service-2-legend finality-1-service-2-desc"
570-
role="group"
571-
className="fr-fieldset fr-fieldset--inline"
572-
>
573-
<legend
574-
id="finality-1-service-2-legend"
575-
className="fr-consent-service__title"
576-
aria-describedby="finality-1-service-2-desc"
536+
<div
537+
className={fr.cx("fr-consent-services", "fr-collapse")}
538+
id={subFinalityDivId}
577539
>
578-
Sous finalité 2
579-
</legend>
580-
<div className="fr-consent-service__radios fr-fieldset--inline">
581-
<div className="fr-radio-group">
582-
<input
583-
type="radio"
584-
id="consent-finality-1-service-2-accept"
585-
name="consent-finality-1-service-2"
586-
/>
587-
<label
588-
className="fr-label"
589-
htmlFor="consent-finality-1-service-2-accept"
590-
>
591-
Accepter
592-
</label>
593-
</div>
594-
<div className="fr-radio-group">
595-
<input
596-
type="radio"
597-
id="consent-finality-1-service-2-refuse"
598-
name="consent-finality-1-service-2"
540+
{Object.entries(subFinalities).map(([subFinality, title]) => (
541+
<SubConsentService
542+
key={subFinality}
543+
title={title}
544+
isConsentGiven={finalityConsent[subFinality]}
545+
onChange={({ isConsentGiven }) =>
546+
onChange({
547+
subFinality,
548+
isConsentGiven
549+
})
550+
}
599551
/>
600-
<label
601-
className="fr-label"
602-
htmlFor="consent-finality-1-service-2-refuse"
603-
>
604-
Refuser
605-
</label>
606-
</div>
552+
))}
607553
</div>
608-
<p
609-
id="finality-1-service-2-desc"
610-
className="fr-consent-service__desc"
611-
>
612-
Ce service utilise 3 cookies.
613-
</p>
614-
</fieldset>
554+
</>
555+
))}
556+
</fieldset>
557+
</div>
558+
);
559+
}
560+
561+
function SubConsentService(props: {
562+
title: ReactNode;
563+
onChange: (params: { isConsentGiven: boolean }) => void;
564+
isConsentGiven: boolean;
565+
}) {
566+
const { title, onChange, isConsentGiven } = props;
567+
568+
const { acceptInputId, refuseInputId } = (function useClosure() {
569+
const id = useId();
570+
571+
const acceptInputId = `consent-finality-${id}-service-accept`;
572+
const refuseInputId = `consent-finality-${id}-service-refuse`;
573+
574+
return { acceptInputId, refuseInputId };
575+
})();
576+
577+
return (
578+
<div className={fr.cx("fr-consent-service")}>
579+
<fieldset className={fr.cx("fr-fieldset", "fr-fieldset--inline")}>
580+
<legend className={fr.cx("fr-consent-service__title")}>{title}</legend>
581+
<div className="fr-consent-service__radios fr-fieldset--inline">
582+
<div className="fr-radio-group">
583+
<input
584+
type="radio"
585+
id={acceptInputId}
586+
checked={isConsentGiven}
587+
onChange={() => onChange({ "isConsentGiven": true })}
588+
/>
589+
<label className={fr.cx("fr-label")} htmlFor={acceptInputId}>
590+
Accepter
591+
</label>
615592
</div>
616-
<div className="fr-consent-service">
617-
<fieldset className="fr-fieldset fr-fieldset--inline">
618-
<legend
619-
id="finality-1-service-3-legend"
620-
className="fr-consent-service__title"
621-
>
622-
Sous finalité 3
623-
</legend>
624-
<div className="fr-consent-service__radios fr-fieldset--inline">
625-
<div className="fr-radio-group">
626-
<input
627-
type="radio"
628-
id="consent-finality-1-service-3-accept"
629-
name="consent-finality-1-service-3"
630-
/>
631-
<label
632-
className="fr-label"
633-
htmlFor="consent-finality-1-service-3-accept"
634-
>
635-
Accepter
636-
</label>
637-
</div>
638-
<div className="fr-radio-group">
639-
<input
640-
type="radio"
641-
id="consent-finality-1-service-3-refuse"
642-
name="consent-finality-1-service-3"
643-
/>
644-
<label
645-
className="fr-label"
646-
htmlFor="consent-finality-1-service-3-refuse"
647-
>
648-
Refuser
649-
</label>
650-
</div>
651-
</div>
652-
</fieldset>
593+
<div className={fr.cx("fr-radio-group")}>
594+
<input
595+
type="radio"
596+
id={refuseInputId}
597+
checked={!isConsentGiven}
598+
onChange={() => onChange({ "isConsentGiven": false })}
599+
/>
600+
<label className={fr.cx("fr-label")} htmlFor={refuseInputId}>
601+
Refuser
602+
</label>
653603
</div>
654604
</div>
655605
</fieldset>

0 commit comments

Comments
 (0)