From 725651a710e8309b99d31f6e7e9a179eab46748f Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 11 Dec 2023 13:06:14 +0000
Subject: [PATCH] fix(ux): customPopup
---
src/components/Popups/Popups.tsx | 93 ++++++++++++++++-------------
src/components/Popups/popups.scss | 10 ++--
src/models/durationOptions.model.ts | 6 ++
src/services/customPopup.service.ts | 4 +-
4 files changed, 64 insertions(+), 49 deletions(-)
diff --git a/src/components/Popups/Popups.tsx b/src/components/Popups/Popups.tsx
index cc2cd407..4fff30d9 100644
--- a/src/components/Popups/Popups.tsx
+++ b/src/components/Popups/Popups.tsx
@@ -18,6 +18,7 @@ import {
Option,
durationEnum,
durationType,
+ mapDuration,
} from '../../models/durationOptions.model'
import { IPartnersInfo } from '../../models/partnersInfo.model'
import { CustomPopupService } from '../../services/customPopup.service'
@@ -54,15 +55,15 @@ const Popups: React.FC = () => {
notification_activated: false,
})
const [previousEndDate, setPreviousEndDate] = useState<string>()
+ const [popupDuration, setPopupDuration] = useState<PopupDuration>({
+ type: durationEnum.infinite,
+ duration: 5,
+ })
const [customPopup, setCustomPopup] = useState<ICustomPopup>({
popupEnabled: false,
title: '',
description: '',
- endDate: DateTime.local().toISO(),
- })
- const [popupDuration, setPopupDuration] = useState<PopupDuration>({
- type: durationEnum.hours,
- duration: 0,
+ endDate: DateTime.local().plus({ days: 365 }).toISO(),
})
const isPartnerNotificationOn = () =>
@@ -135,19 +136,25 @@ const Popups: React.FC = () => {
if (user) {
const partnersInfoService = new PartnersInfoService()
const customPopupService = new CustomPopupService()
- const partnersInfoData = await partnersInfoService.getPartnersInfo()
- const customPopupData = await customPopupService.getCustomPopupInfo()
+ const previousPartnersInfo = await partnersInfoService.getPartnersInfo()
+ const previousPopup = await customPopupService.getCustomPopupInfo()
- if (partnersInfoData) {
+ if (previousPartnersInfo) {
setPartnersInfo({
- ...partnersInfoData,
+ ...previousPartnersInfo,
})
}
- if (customPopupData) {
+ if (previousPopup) {
+ const isOutdated = isPopupOutdated(previousPopup.endDate)
+ /** If outdated, set value to false, otherwise, set it to its value */
+ const isEnabled = isOutdated ? false : previousPopup.popupEnabled
setCustomPopup({
- ...customPopupData,
+ title: previousPopup.title,
+ description: previousPopup.description,
+ endDate: customPopup.endDate,
+ popupEnabled: isEnabled,
})
- setPreviousEndDate(customPopupData.endDate || undefined)
+ setPreviousEndDate(previousPopup.endDate || undefined)
}
}
setIsLoading(false)
@@ -190,9 +197,7 @@ const Popups: React.FC = () => {
}))
}
- /**
- * Handles duration change
- */
+ /** Handles duration change */
useEffect(() => {
const now = DateTime.local()
let newDate: DateTime
@@ -200,7 +205,7 @@ const Popups: React.FC = () => {
newDate = now.plus({
[popupDuration.type]: popupDuration.duration,
})
- } else if (popupDuration.type === 'infinite') {
+ } else {
newDate = now.plus({
years: 1,
})
@@ -323,33 +328,8 @@ const Popups: React.FC = () => {
getRemainingDuration(previousEndDate)}
</FormGroup>
- <div className="popupTitle">
- <TextField
- type="text"
- placeholder="Titre de la popup"
- fullWidth
- label="Titre"
- value={customPopup.title}
- onChange={event =>
- handlePopupChange('title', event.target.value)
- }
- />
- </div>
-
- <div className="popupDescription">
- <CustomEditor
- baseState={convertStringToEditorState(
- customPopup.description
- )}
- handleChange={value =>
- handlePopupChange('description', value)
- }
- type="custom_popup"
- />
- </div>
-
<div className="popupEndDate">
- <label htmlFor="title">Nouvelle Durée</label>
+ <h4>Durée</h4>
<div>
<FormControl style={{ flexDirection: 'row', gap: '1rem' }}>
<NativeSelect
@@ -358,6 +338,7 @@ const Popups: React.FC = () => {
id: 'uncontrolled-native',
}}
onChange={event => handleSelectChange(event)}
+ value={popupDuration.type}
>
{OPTIONS.map(option => (
<option key={option.value} value={option.value}>
@@ -368,12 +349,14 @@ const Popups: React.FC = () => {
{popupDuration.type !== 'infinite' && (
<TextField
+ style={{ width: '6rem' }}
inputProps={{
inputMode: 'numeric',
pattern: '[0-9]*',
}}
id="outlined-number"
type="number"
+ label={mapDuration[popupDuration.type]}
InputLabelProps={{
shrink: true,
}}
@@ -389,6 +372,32 @@ const Popups: React.FC = () => {
</FormControl>
</div>
</div>
+
+ <h4>Contenu</h4>
+ <div className="popupTitle">
+ <TextField
+ type="text"
+ placeholder="Titre de la popup"
+ fullWidth
+ label="Titre"
+ value={customPopup.title}
+ onChange={event =>
+ handlePopupChange('title', event.target.value)
+ }
+ />
+ </div>
+
+ <div className="popupDescription">
+ <CustomEditor
+ baseState={convertStringToEditorState(
+ customPopup.description
+ )}
+ handleChange={value =>
+ handlePopupChange('description', value)
+ }
+ type="custom_popup"
+ />
+ </div>
</div>
<div className="buttons">
diff --git a/src/components/Popups/popups.scss b/src/components/Popups/popups.scss
index 0071eb96..f106a525 100644
--- a/src/components/Popups/popups.scss
+++ b/src/components/Popups/popups.scss
@@ -16,11 +16,6 @@
flex-direction: column;
gap: 0.5rem;
- label {
- text-transform: uppercase;
- font-weight: 700;
- }
-
.count {
color: $text-dark;
max-width: 600px;
@@ -37,4 +32,9 @@
flex-direction: column;
gap: 1rem;
}
+
+ h4 {
+ text-transform: uppercase;
+ margin-top: 1rem;
+ }
}
diff --git a/src/models/durationOptions.model.ts b/src/models/durationOptions.model.ts
index 8e71e9a2..38571d8a 100644
--- a/src/models/durationOptions.model.ts
+++ b/src/models/durationOptions.model.ts
@@ -6,6 +6,12 @@ export enum durationEnum {
infinite = 'infinite',
}
+export enum mapDuration {
+ hours = 'Heures',
+ days = 'Jours',
+ infinite = 'Indéterminée',
+}
+
export interface Option {
value: durationType
label: string
diff --git a/src/services/customPopup.service.ts b/src/services/customPopup.service.ts
index 4379356c..2f95978c 100644
--- a/src/services/customPopup.service.ts
+++ b/src/services/customPopup.service.ts
@@ -32,8 +32,8 @@ export class CustomPopupService {
*/
public getCustomPopupInfo = async (): Promise<ICustomPopup | null> => {
try {
- const { data } = await axios.get(`/api/common/customPopup`)
- return data as ICustomPopup
+ const { data } = await axios.get<ICustomPopup>(`/api/common/customPopup`)
+ return data
} catch (e) {
console.error('error', e)
return null
--
GitLab