Merge branch 'feat/US555-partners-check' into 'dev'

Feat/us555 partners check

See merge request web-et-numerique/llle_project/backoffice-client!20

.vscode/settings.json

 {
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#37cc4e",
+    "activityBar.activeBorder": "#7867d8",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#7867d8",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "titleBar.activeBackground": "#2aa63d",
+    "titleBar.inactiveBackground": "#2aa63d99",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveForeground": "#e7e7e799",
+    "statusBar.background": "#2aa63d",
+    "statusBarItem.hoverBackground": "#37cc4e",
+    "statusBar.foreground": "#e7e7e7",
+    "activityBar.activeBackground": "#37cc4e",
+    "sash.hoverBorder": "#37cc4e",
+    "statusBarItem.remoteBackground": "#2aa63d",
+    "statusBarItem.remoteForeground": "#e7e7e7"
+  },
   "editor.formatOnSave": true,
   "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "peacock.color": "#2aa63d"
 }

src/components/PartnersInfo/PartnersInfo.tsx

+import React, { useCallback, useContext, useEffect, useState } from 'react'
+import { convertStringToEditorState } from '../../utils/editorStateManagment'
+import CustomEditor from '../Editing/CustomEditor'
+import { IPartnersInfo } from '../../models/partnersInfo.model'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import './partnersInfo.scss'
+import { PartnersInfoService } from '../../services/partnersInfo.service'
+import { UserContext, UserContextProps } from '../../hooks/userContext'
+import Loader from '../Loader/Loader'
+import { CheckboxType } from '../../enum/checkboxType.enum'
+
+const PartnersInfo: React.FC = () => {
+  const [refreshData, setRefreshData] = useState(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [partnersInfo, setPartnersInfo] = useState<IPartnersInfo>({
+    message: '',
+    grdf_failure: false,
+    enedis_failure: false,
+    egl_failure: false,
+    notification_activated: false,
+  })
+  const { user }: Partial<UserContextProps> = useContext(UserContext)
+
+  const handleEditorChange = (value: string): void => {
+    setPartnersInfo((prevPartnersInfo) => ({
+      ...prevPartnersInfo,
+      message: value,
+    }))
+  }
+
+  const handleCheckboxChange = (value: boolean, type: CheckboxType): void => {
+    switch (type) {
+      case CheckboxType.GRDF:
+        setPartnersInfo((prevPartnersInfo) => ({
+          ...prevPartnersInfo,
+          grdf_failure: value,
+        }))
+        break
+      case CheckboxType.ENEDIS:
+        setPartnersInfo((prevPartnersInfo) => ({
+          ...prevPartnersInfo,
+          enedis_failure: value,
+        }))
+        break
+      case CheckboxType.EGL:
+        setPartnersInfo((prevPartnersInfo) => ({
+          ...prevPartnersInfo,
+          egl_failure: value,
+        }))
+        break
+      case CheckboxType.NOTIFICATION:
+        setPartnersInfo((prevPartnersInfo) => ({
+          ...prevPartnersInfo,
+          notification_activated: value,
+        }))
+        break
+      default:
+        throw new Error('Unknown checkbox type')
+    }
+  }
+
+  const handleCancel = useCallback(() => {
+    setRefreshData(true)
+  }, [setRefreshData])
+
+  const resetFields = useCallback(() => {
+    setPartnersInfo({
+      message: '',
+      grdf_failure: false,
+      enedis_failure: false,
+      egl_failure: false,
+      notification_activated: false,
+    })
+  }, [setPartnersInfo])
+
+  useEffect(() => {
+    let subscribed = true
+    resetFields()
+    setIsLoading(true)
+
+    async function getPartnersInfo() {
+      if (user) {
+        const partnersInfoService = new PartnersInfoService()
+        const partnersInfoResp: IPartnersInfo | null =
+          await partnersInfoService.getPartnersInfo()
+        if (partnersInfoResp) {
+          setPartnersInfo({
+            message: partnersInfoResp.message,
+            grdf_failure: partnersInfoResp.grdf_failure,
+            enedis_failure: partnersInfoResp.enedis_failure,
+            egl_failure: partnersInfoResp.egl_failure,
+            notification_activated: partnersInfoResp.notification_activated,
+          })
+        }
+      }
+      setIsLoading(false)
+    }
+    if (subscribed) {
+      getPartnersInfo()
+    }
+    return () => {
+      subscribed = false
+      setRefreshData(false)
+    }
+  }, [user, refreshData, setPartnersInfo, resetFields])
+
+  const handleSave = async (): Promise<void> => {
+    if (user) {
+      const partnersInfoService = new PartnersInfoService()
+      await partnersInfoService.savePartnersInfo(partnersInfo, user.xsrftoken)
+    }
+  }
+
+  return (
+    <>
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <div className="partnersInfo">
+          <h2>État des services des partenaires</h2>
+          <div>
+            <div className="switch_div">
+              Pop-up active
+              <input
+                type="checkbox"
+                id="switch_notification"
+                onChange={(event) => {
+                  handleCheckboxChange(
+                    event.currentTarget.checked,
+                    CheckboxType.NOTIFICATION
+                  )
+                }}
+                checked={partnersInfo.notification_activated}
+              />
+              <label htmlFor="switch_notification"></label>
+            </div>
+
+            <p className="title">Message de la pop-up</p>
+            <CustomEditor
+              baseState={convertStringToEditorState(partnersInfo.message)}
+              handleChange={handleEditorChange}
+              editorType="info"
+            />
+            <p className="title">État des services</p>
+
+            <div>
+              <div className="switch_div">
+                Panne GRDF
+                <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 className="switch_div">
+                Panne Enedis
+                <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">
+                Panne EGL
+                <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>
+
+            <div className="buttons">
+              <button className="btnCancel" onClick={handleCancel}>
+                Annuler
+              </button>
+              <button className="btnValid" onClick={handleSave}>
+                Sauvegarder
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default PartnersInfo

src/components/PartnersInfo/partnersInfo.scss

+.partnersInfo {
+  margin: 2rem 0;
+  .title {
+    margin: 1rem 0;
+  }
+  h2 {
+    margin-bottom: 1rem;
+  }
+
+  .switch_div {
+    display: inline-block;
+    padding: 1rem 1rem;
+  }
+
+  input[type='checkbox'] {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+    margin-bottom: 15px;
+  }
+
+  label {
+    display: block;
+    width: 80px;
+    height: 30px;
+    background-color: grey;
+    border-radius: 15px;
+    position: relative;
+    cursor: pointer;
+    transition: 0.5s;
+    box-shadow: 0 0 20px #80808050;
+  }
+
+  label::after {
+    content: '';
+    width: 24px;
+    height: 24px;
+    background-color: #e8f5f7;
+    position: absolute;
+    border-radius: 13px;
+    top: 3px;
+    left: 3px;
+    transition: 0.5s;
+  }
+
+  input:checked + label:after {
+    left: calc(100% - 3px);
+    transform: translateX(-100%);
+  }
+
+  input:checked + label {
+    background-color: #e3b82a;
+  }
+
+  label:active:after {
+    width: 34px;
+  }
+}

src/components/Settings/Settings.tsx

 import React from 'react'
+import PartnersInfo from '../PartnersInfo/PartnersInfo'
 
 const Settings: React.FC = () => {
-  return <div>A venir</div>
-}
+  return (
+    <>
+      <div className="header">
+        <p className="title pagetitle">Paramètres de l'appli</p>
+      </div>
 
+      <div className="content">
+        <PartnersInfo />
+      </div>
+    </>
+  )
+}
 export default Settings

src/enum/checkboxType.enum.ts

+export enum CheckboxType {
+  NOTIFICATION = 0,
+  GRDF = 1,
+  ENEDIS = 2,
+  EGL = 3,
+}

src/models/partnersInfo.model.ts

+export interface IPartnersInfo {
+  message: string
+  grdf_failure: boolean
+  enedis_failure: boolean
+  egl_failure: boolean
+  notification_activated: boolean
+}

src/services/partnersInfo.service.ts

+import axios from 'axios'
+import { IPartnersInfo } from '../models/partnersInfo.model'
+import { toast } from 'react-toastify'
+export class PartnersInfoService {
+  /**
+   * Save the partnersInfo
+   * @param partnersInfo
+   * @param token
+   */
+  public savePartnersInfo = async (
+    partnersInfo: IPartnersInfo,
+    token: string
+  ): Promise<void> => {
+    try {
+      await axios.put(
+        `/api/admin/partnersInfo`,
+        {
+          message: partnersInfo.message,
+          grdf_failure: partnersInfo.grdf_failure,
+          enedis_failure: partnersInfo.enedis_failure,
+          egl_failure: partnersInfo.egl_failure,
+          notification_activated: partnersInfo.notification_activated,
+        },
+        {
+          headers: {
+            'XSRF-TOKEN': token,
+          },
+        }
+      )
+      toast.success('Partners info succesfully saved !')
+    } catch (e) {
+      toast.error('Failed to save partners info')
+      console.error(e)
+    }
+  }
+
+  /**
+   * Gets the partners information
+   */
+  public getPartnersInfo = async (): Promise<IPartnersInfo | null> => {
+    try {
+      const { data } = await axios.get(`/api/common/partnersInfo`)
+      return data as IPartnersInfo
+    } catch (e) {
+      console.error('error', e)
+      return null
+    }
+  }
+}

src/styles/index.scss

@@ -2,7 +2,6 @@
 @import 'config/colors';
 @import 'config/typography';
 @import 'config/layout';
-@import 'config/layout';
 @import 'toast';
 
 * {