fix(ux): customPopup

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">

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;
+  }
 }

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

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