Skip to content
Snippets Groups Projects
Commit 1f2829df authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

Merge branch 'rework-custom-popup' into 'dev'

fix(ux): customPopup

See merge request !134
parents bca7f7d9 725651a7
No related branches found
No related tags found
2 merge requests!141Release 2024-02-29,!134fix(ux): customPopup
Pipeline #87415 passed
...@@ -18,6 +18,7 @@ import { ...@@ -18,6 +18,7 @@ import {
Option, Option,
durationEnum, durationEnum,
durationType, durationType,
mapDuration,
} from '../../models/durationOptions.model' } from '../../models/durationOptions.model'
import { IPartnersInfo } from '../../models/partnersInfo.model' import { IPartnersInfo } from '../../models/partnersInfo.model'
import { CustomPopupService } from '../../services/customPopup.service' import { CustomPopupService } from '../../services/customPopup.service'
...@@ -54,15 +55,15 @@ const Popups: React.FC = () => { ...@@ -54,15 +55,15 @@ const Popups: React.FC = () => {
notification_activated: false, notification_activated: false,
}) })
const [previousEndDate, setPreviousEndDate] = useState<string>() const [previousEndDate, setPreviousEndDate] = useState<string>()
const [popupDuration, setPopupDuration] = useState<PopupDuration>({
type: durationEnum.infinite,
duration: 5,
})
const [customPopup, setCustomPopup] = useState<ICustomPopup>({ const [customPopup, setCustomPopup] = useState<ICustomPopup>({
popupEnabled: false, popupEnabled: false,
title: '', title: '',
description: '', description: '',
endDate: DateTime.local().toISO(), endDate: DateTime.local().plus({ days: 365 }).toISO(),
})
const [popupDuration, setPopupDuration] = useState<PopupDuration>({
type: durationEnum.hours,
duration: 0,
}) })
const isPartnerNotificationOn = () => const isPartnerNotificationOn = () =>
...@@ -135,19 +136,25 @@ const Popups: React.FC = () => { ...@@ -135,19 +136,25 @@ const Popups: React.FC = () => {
if (user) { if (user) {
const partnersInfoService = new PartnersInfoService() const partnersInfoService = new PartnersInfoService()
const customPopupService = new CustomPopupService() const customPopupService = new CustomPopupService()
const partnersInfoData = await partnersInfoService.getPartnersInfo() const previousPartnersInfo = await partnersInfoService.getPartnersInfo()
const customPopupData = await customPopupService.getCustomPopupInfo() const previousPopup = await customPopupService.getCustomPopupInfo()
if (partnersInfoData) { if (previousPartnersInfo) {
setPartnersInfo({ 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({ setCustomPopup({
...customPopupData, title: previousPopup.title,
description: previousPopup.description,
endDate: customPopup.endDate,
popupEnabled: isEnabled,
}) })
setPreviousEndDate(customPopupData.endDate || undefined) setPreviousEndDate(previousPopup.endDate || undefined)
} }
} }
setIsLoading(false) setIsLoading(false)
...@@ -190,9 +197,7 @@ const Popups: React.FC = () => { ...@@ -190,9 +197,7 @@ const Popups: React.FC = () => {
})) }))
} }
/** /** Handles duration change */
* Handles duration change
*/
useEffect(() => { useEffect(() => {
const now = DateTime.local() const now = DateTime.local()
let newDate: DateTime let newDate: DateTime
...@@ -200,7 +205,7 @@ const Popups: React.FC = () => { ...@@ -200,7 +205,7 @@ const Popups: React.FC = () => {
newDate = now.plus({ newDate = now.plus({
[popupDuration.type]: popupDuration.duration, [popupDuration.type]: popupDuration.duration,
}) })
} else if (popupDuration.type === 'infinite') { } else {
newDate = now.plus({ newDate = now.plus({
years: 1, years: 1,
}) })
...@@ -323,33 +328,8 @@ const Popups: React.FC = () => { ...@@ -323,33 +328,8 @@ const Popups: React.FC = () => {
getRemainingDuration(previousEndDate)} getRemainingDuration(previousEndDate)}
</FormGroup> </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"> <div className="popupEndDate">
<label htmlFor="title">Nouvelle Durée</label> <h4>Durée</h4>
<div> <div>
<FormControl style={{ flexDirection: 'row', gap: '1rem' }}> <FormControl style={{ flexDirection: 'row', gap: '1rem' }}>
<NativeSelect <NativeSelect
...@@ -358,6 +338,7 @@ const Popups: React.FC = () => { ...@@ -358,6 +338,7 @@ const Popups: React.FC = () => {
id: 'uncontrolled-native', id: 'uncontrolled-native',
}} }}
onChange={event => handleSelectChange(event)} onChange={event => handleSelectChange(event)}
value={popupDuration.type}
> >
{OPTIONS.map(option => ( {OPTIONS.map(option => (
<option key={option.value} value={option.value}> <option key={option.value} value={option.value}>
...@@ -368,12 +349,14 @@ const Popups: React.FC = () => { ...@@ -368,12 +349,14 @@ const Popups: React.FC = () => {
{popupDuration.type !== 'infinite' && ( {popupDuration.type !== 'infinite' && (
<TextField <TextField
style={{ width: '6rem' }}
inputProps={{ inputProps={{
inputMode: 'numeric', inputMode: 'numeric',
pattern: '[0-9]*', pattern: '[0-9]*',
}} }}
id="outlined-number" id="outlined-number"
type="number" type="number"
label={mapDuration[popupDuration.type]}
InputLabelProps={{ InputLabelProps={{
shrink: true, shrink: true,
}} }}
...@@ -389,6 +372,32 @@ const Popups: React.FC = () => { ...@@ -389,6 +372,32 @@ const Popups: React.FC = () => {
</FormControl> </FormControl>
</div> </div>
</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>
<div className="buttons"> <div className="buttons">
......
...@@ -16,11 +16,6 @@ ...@@ -16,11 +16,6 @@
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
label {
text-transform: uppercase;
font-weight: 700;
}
.count { .count {
color: $text-dark; color: $text-dark;
max-width: 600px; max-width: 600px;
...@@ -37,4 +32,9 @@ ...@@ -37,4 +32,9 @@
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
h4 {
text-transform: uppercase;
margin-top: 1rem;
}
} }
...@@ -6,6 +6,12 @@ export enum durationEnum { ...@@ -6,6 +6,12 @@ export enum durationEnum {
infinite = 'infinite', infinite = 'infinite',
} }
export enum mapDuration {
hours = 'Heures',
days = 'Jours',
infinite = 'Indéterminée',
}
export interface Option { export interface Option {
value: durationType value: durationType
label: string label: string
......
...@@ -32,8 +32,8 @@ export class CustomPopupService { ...@@ -32,8 +32,8 @@ export class CustomPopupService {
*/ */
public getCustomPopupInfo = async (): Promise<ICustomPopup | null> => { public getCustomPopupInfo = async (): Promise<ICustomPopup | null> => {
try { try {
const { data } = await axios.get(`/api/common/customPopup`) const { data } = await axios.get<ICustomPopup>(`/api/common/customPopup`)
return data as ICustomPopup return data
} catch (e) { } catch (e) {
console.error('error', e) console.error('error', e)
return null return null
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment