diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index 70d4ac14ff287b1b3f8c5561654ec781839b1974..91101a3fda14c0b8f34c104aff09b6a23949d8c5 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -238,142 +238,149 @@ const Settings: React.FC = () => {
<h1>Création de Pop-up</h1>
<div className="partnersInfo">
<h2 className="title">Affichage des pop-up de panne</h2>
- <p>Services concernés</p>
- <div className="switch_div">
- <span>Panne Enedis</span>
- <input
- type="checkbox"
- id="switch_enedis"
- onChange={(event) => {
- handleCheckboxChange(
- event.currentTarget.checked,
- CheckboxType.ENEDIS
- )
- }}
- checked={partnersInfo.enedis_failure}
- />
- <label htmlFor="switch_enedis"></label>
- </div>
- <div className="switch_div">
- <span>Panne EGL</span>
- <input
- type="checkbox"
- id="switch_egl"
- onChange={(event) => {
- handleCheckboxChange(
- event.currentTarget.checked,
- CheckboxType.EGL
- )
- }}
- checked={partnersInfo.egl_failure}
- />
- <label htmlFor="switch_egl"></label>
- </div>
- <div className="switch_div">
- <span>Panne GRDF</span>
- <input
- type="checkbox"
- id="switch_grdf"
- onChange={(event) => {
- handleCheckboxChange(
- event.currentTarget.checked,
- CheckboxType.GRDF
- )
- }}
- checked={partnersInfo.grdf_failure}
- />
- <label htmlFor="switch_grdf"></label>
- </div>
- </div>
-
- <div className="customPopup">
- <h2 className="title">Affichage de pop-up personnalisée</h2>
- <div className="currentPopup">
+ <div className={customPopup.popupEnabled ? 'disabled' : ''}>
+ <p>Services concernés</p>
<div className="switch_div">
- <span>Pop-up active</span>
+ <span>Panne Enedis</span>
<input
type="checkbox"
- id="switch_popup"
- checked={customPopup.popupEnabled}
+ id="switch_enedis"
+ disabled={customPopup.popupEnabled}
+ checked={partnersInfo.enedis_failure}
onChange={(event) => {
handleCheckboxChange(
event.currentTarget.checked,
- CheckboxType.CUSTOM
+ CheckboxType.ENEDIS
)
}}
/>
- <label htmlFor="switch_popup"></label>
+ <label htmlFor="switch_enedis"></label>
+ </div>
+ <div className="switch_div">
+ <span>Panne EGL</span>
+ <input
+ type="checkbox"
+ id="switch_egl"
+ disabled={customPopup.popupEnabled}
+ checked={partnersInfo.egl_failure}
+ onChange={(event) => {
+ handleCheckboxChange(
+ event.currentTarget.checked,
+ CheckboxType.EGL
+ )
+ }}
+ />
+ <label htmlFor="switch_egl"></label>
+ </div>
+ <div className="switch_div">
+ <span>Panne GRDF</span>
+ <input
+ type="checkbox"
+ id="switch_grdf"
+ disabled={customPopup.popupEnabled}
+ checked={partnersInfo.grdf_failure}
+ onChange={(event) => {
+ handleCheckboxChange(
+ event.currentTarget.checked,
+ CheckboxType.GRDF
+ )
+ }}
+ />
+ <label htmlFor="switch_grdf"></label>
</div>
-
- {customPopup.popupEnabled &&
- previousEndDate &&
- getRemainingDuration(previousEndDate)}
</div>
- {customPopup.popupEnabled && (
- <>
- <div className="popupTitle">
- <label htmlFor="title">Titre</label>
+ </div>
+
+ <div className="customPopup">
+ <h2 className="title">Affichage de pop-up personnalisée</h2>
+ <div className={isPartnerNotificationOn() ? 'disabled' : ''}>
+ <div className="currentPopup">
+ <div className="switch_div">
+ <span>Pop-up active</span>
<input
- type="text"
- name="title"
- id="title"
- min={1}
- placeholder="Titre"
- value={customPopup.title}
- onChange={(event) => handlePopupChange(event, 'title')}
+ type="checkbox"
+ id="switch_popup"
+ disabled={isPartnerNotificationOn()}
+ checked={customPopup.popupEnabled}
+ onChange={(event) => {
+ handleCheckboxChange(
+ event.currentTarget.checked,
+ CheckboxType.CUSTOM
+ )
+ }}
/>
+ <label htmlFor="switch_popup"></label>
</div>
- <div className="popupDescription">
- <label htmlFor="description">Description</label>
- <textarea
- name="description"
- id="description"
- placeholder="Description"
- rows={5}
- maxLength={250}
- value={customPopup.description}
- onChange={(event) =>
- handlePopupChange(event, 'description')
- }
- />
- <p className="count">
- {customPopup.description.length} / 250
- </p>
- </div>
- <div className="popupEndDate">
- <label htmlFor="title">Nouvelle Durée</label>
- <div className="durationInput">
- <select
- value={popupDuration.type}
- onChange={(event) => handleSelectChange(event)}
- >
- {OPTIONS.map((option) => (
- <option
- key={option.value}
- value={option.value}
- selected={popupDuration.type === option.value}
- >
- {option.label}
- </option>
- ))}
- </select>
- {popupDuration.type !== 'infinite' && (
- <input
- type="number"
- min="0"
- value={popupDuration.duration}
- onChange={(e) =>
- setPopupDuration((prev) => ({
- ...prev,
- duration: Number(e.target.value),
- }))
- }
- />
- )}
- </div>
+
+ {customPopup.popupEnabled &&
+ previousEndDate &&
+ getRemainingDuration(previousEndDate)}
+ </div>
+
+ <div className="popupTitle">
+ <label htmlFor="title">Titre</label>
+ <input
+ type="text"
+ name="title"
+ id="title"
+ min={1}
+ placeholder="Titre"
+ value={customPopup.title}
+ onChange={(event) => handlePopupChange(event, 'title')}
+ />
+ </div>
+
+ <div className="popupDescription">
+ <label htmlFor="description">Description</label>
+ <textarea
+ name="description"
+ id="description"
+ placeholder="Description"
+ rows={5}
+ maxLength={250}
+ value={customPopup.description}
+ onChange={(event) =>
+ handlePopupChange(event, 'description')
+ }
+ />
+ <p className="count">
+ {customPopup.description.length} / 250
+ </p>
+ </div>
+
+ <div className="popupEndDate">
+ <label htmlFor="title">Nouvelle Durée</label>
+ <div className="durationInput">
+ <select
+ value={popupDuration.type}
+ onChange={(event) => handleSelectChange(event)}
+ >
+ {OPTIONS.map((option) => (
+ <option
+ key={option.value}
+ value={option.value}
+ selected={popupDuration.type === option.value}
+ >
+ {option.label}
+ </option>
+ ))}
+ </select>
+ {popupDuration.type !== 'infinite' && (
+ <input
+ type="number"
+ min="0"
+ value={popupDuration.duration}
+ onChange={(e) =>
+ setPopupDuration((prev) => ({
+ ...prev,
+ duration: Number(e.target.value),
+ }))
+ }
+ />
+ )}
</div>
- </>
- )}
+ </div>
+ </div>
</div>
<div className="buttons">
diff --git a/src/components/Settings/settings.scss b/src/components/Settings/settings.scss
index 72ba702ca501f19d65516ec18dee7756c155fd79..9510c5271563b028768526719676a20c87494208 100644
--- a/src/components/Settings/settings.scss
+++ b/src/components/Settings/settings.scss
@@ -1,6 +1,10 @@
@import '../../styles/config/colors';
.settings {
+ .disabled {
+ opacity: 0.5;
+ }
+
.partnersInfo,
.customPopup {
h2.title {