Merge branch 'feat/US720-add-price-managment' into 'dev'

feat(price): Add price managment

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

dbinit/dbinit.sql

+LOAD DATA LOCAL INFILE '/dbinit/fluidprices.CSV' INTO TABLE prices 
+FIELDS TERMINATED BY ',' 
+LINES TERMINATED BY '\n'
+IGNORE 1 ROWS;
\ No newline at end of file

dbinit/fluidprices.CSV

+fluid_type,price,start_date,end_date,id,created_at,updated_at
+0,0.1256,2012-07-23T00:00:00Z,2013-07-31T23:59:59Z,1,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1329,2013-08-01T00:00:00Z,2014-10-31T23:59:59Z,2,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1401,2014-01-11T00:00:00Z,2015-07-31T23:59:59Z,3,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1437,2015-08-01T00:00:00Z,2016-07-31T23:59:59Z,4,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1503,2016-08-01T00:00:00Z,2017-07-31T23:59:59Z,5,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1546,2017-08-01T00:00:00Z,2018-01-31T23:59:59Z,6,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1555,2018-02-01T00:00:00Z,2018-07-31T23:59:59Z,7,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.145,2018-08-01T00:00:00Z,2019-05-31T23:59:59Z,8,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1531,2019-06-01T00:00:00Z,2019-07-31T23:59:59Z,9,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1524,2019-08-01T00:00:00Z,2020-01-31T23:59:59Z,10,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1546,2020-02-01T00:00:00Z,2020-07-31T23:59:59Z,11,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1557,2020-08-01T00:00:00Z,2021-01-31T23:59:59Z,12,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1582,2021-02-01T00:00:00Z,2021-07-31T23:59:59Z,13,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.1558,2021-08-01T00:00:00Z,2022-01-31T23:59:59Z,14,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+0,0.174,2022-02-01T00:00:00Z,,15,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.0030735,2012-01-01T00:00:00Z,2012-12-31T23:59:59Z,16,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.0031483,2013-01-01T00:00:00Z,2013-12-31T23:59:59Z,17,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.0031381,2014-01-01T00:00:00Z,2014-12-31T23:59:59Z,18,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.00307,2015-01-01T00:00:00Z,2015-12-31T23:59:59Z,19,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.0031,2016-01-01T00:00:00Z,2016-12-31T23:59:59Z,20,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.00311,2017-01-01T00:00:00Z,2017-12-31T23:59:59Z,21,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.00313,2018-01-01T00:00:00Z,2018-12-31T23:59:59Z,22,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.00313,2019-01-01T00:00:00Z,2019-12-31T23:59:59Z,23,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.00315,2020-01-01T00:00:00Z,2020-12-31T23:59:59Z,24,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+1,0.00319,2021-01-01T00:00:00Z,,25,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0919,2017-01-01T00:00:00Z,2017-01-31T23:59:59Z,26,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0915,2017-02-01T00:00:00Z,2017-02-28T23:59:59Z,27,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0932,2017-03-01T00:00:00Z,2017-03-31T23:59:59Z,28,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0927,2017-04-01T00:00:00Z,2017-04-30T23:59:59Z,29,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0906,2017-05-01T00:00:00Z,2017-05-31T23:59:59Z,30,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0906,2017-06-01T00:00:00Z,2017-06-30T23:59:59Z,31,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0788,2017-07-01T00:00:00Z,2017-07-31T23:59:59Z,32,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0783,2017-08-01T00:00:00Z,2017-08-31T23:59:59Z,33,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0783,2017-09-01T00:00:00Z,2017-09-30T23:59:59Z,34,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0791,2017-10-01T00:00:00Z,2017-10-31T23:59:59Z,35,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0806,2017-11-01T00:00:00Z,2017-11-30T23:59:59Z,36,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0812,2017-12-01T00:00:00Z,2017-12-31T23:59:59Z,37,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0857,2018-01-01T00:00:00Z,2018-01-31T23:59:59Z,38,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0866,2018-02-01T00:00:00Z,2018-02-28T23:59:59Z,39,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0847,2018-03-01T00:00:00Z,2018-03-31T23:59:59Z,40,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0839,2018-04-01T00:00:00Z,2018-04-30T23:59:59Z,41,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0842,2018-05-01T00:00:00Z,2018-05-31T23:59:59Z,42,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0855,2018-06-01T00:00:00Z,2018-06-30T23:59:59Z,43,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0959,2018-07-01T00:00:00Z,2018-07-31T23:59:59Z,44,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0961,2018-08-01T00:00:00Z,2018-08-31T23:59:59Z,45,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0967,2018-09-01T00:00:00Z,2018-09-30T23:59:59Z,46,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0989,2018-10-01T00:00:00Z,2018-10-31T23:59:59Z,47,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.1031,2018-11-01T00:00:00Z,2018-11-30T23:59:59Z,48,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.1013,2018-12-01T00:00:00Z,2018-12-31T23:59:59Z,49,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0999,2019-01-01T00:00:00Z,2019-01-31T23:59:59Z,50,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0993,2019-02-01T00:00:00Z,2019-02-28T23:59:59Z,51,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0993,2019-03-01T00:00:00Z,2019-03-31T23:59:59Z,52,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0977,2019-04-01T00:00:00Z,2019-04-30T23:59:59Z,53,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0973,2019-05-01T00:00:00Z,2019-05-31T23:59:59Z,54,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0969,2019-06-01T00:00:00Z,2019-06-30T23:59:59Z,55,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0795,2019-07-01T00:00:00Z,2019-07-31T23:59:59Z,56,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0791,2019-08-01T00:00:00Z,2019-08-31T23:59:59Z,57,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0785,2019-09-01T00:00:00Z,2019-09-30T23:59:59Z,58,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.077,2019-10-01T00:00:00Z,2019-10-31T23:59:59Z,59,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0789,2019-11-01T00:00:00Z,2019-11-30T23:59:59Z,60,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0793,2019-12-01T00:00:00Z,2019-12-31T23:59:59Z,61,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0787,2020-01-01T00:00:00Z,2020-01-31T23:59:59Z,62,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0765,2020-02-01T00:00:00Z,2020-02-29T23:59:59Z,70,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0736,2020-03-01T00:00:00Z,2020-03-31T23:59:59Z,71,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.071,2020-04-01T00:00:00Z,2020-04-30T23:59:59Z,72,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0703,2020-05-01T00:00:00Z,2020-05-31T23:59:59Z,73,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0687,2020-06-01T00:00:00Z,2020-06-30T23:59:59Z,74,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0698,2020-07-01T00:00:00Z,2020-07-31T23:59:59Z,75,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0705,2020-08-01T00:00:00Z,2020-08-31T23:59:59Z,76,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0709,2020-09-01T00:00:00Z,2020-09-30T23:59:59Z,77,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0735,2020-10-01T00:00:00Z,2020-10-31T23:59:59Z,78,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0745,2020-11-01T00:00:00Z,2020-11-30T23:59:59Z,79,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0759,2020-12-01T00:00:00Z,2020-12-31T23:59:59Z,80,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.076,2021-01-01T00:00:00Z,2021-01-31T23:59:59Z,81,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0782,2021-02-01T00:00:00Z,2021-02-28T23:59:59Z,82,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0818,2021-03-01T00:00:00Z,2021-03-31T23:59:59Z,83,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.079,2021-04-01T00:00:00Z,2021-04-30T23:59:59Z,84,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0797,2021-05-01T00:00:00Z,2021-05-31T23:59:59Z,85,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0826,2021-06-01T00:00:00Z,2021-06-30T23:59:59Z,86,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0895,2021-07-01T00:00:00Z,2021-07-31T23:59:59Z,87,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.0934,2021-08-01T00:00:00Z,2021-08-31T23:59:59Z,88,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.1002,2021-09-01T00:00:00Z,2021-09-30T23:59:59Z,89,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
+2,0.1121,2021-10-01T00:00:00Z,,90,2000-01-01T00:00:00Z,2000-01-01T00:00:00Z
\ No newline at end of file

dbinit/init.md

+# Init first prices data
+
+## Local
+
+If the script is not working (problem with secure_file_priv variable), use the import in phpMyAdmin:
+
+- Ignore the request for the first line
+- Select format "CVS using LOAD DATA"
+- Choose the right column separator ","
+- Then launch the execution
+
+## Rec/Prod
+
+- Connect to mysql docker container
+
+```
+docker exec -it <container-id> bash
+```
+
+- Open mysql shell
+
+```
+mysql --local-infile=1 -uroot -p backoffice < /dbinit/dbinit.sql
+
+```

docker-compose.local.yml

@@ -12,8 +12,8 @@ services:
     depends_on:
       - backend
     # For linux users
-    # extra_hosts:
-    #   - 'host.docker.internal:host-gateway'
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
 
   database-agent:
     image: mysql:5
@@ -27,6 +27,8 @@ services:
       interval: 5s
       timeout: 10s
       retries: 60
+    volumes:
+      - ./dbinit:/dbinit
 
   backend:
     image: registry.forge.grandlyon.com/web-et-numerique/llle_project/backoffice-server:dev

docker-compose.yml

@@ -29,6 +29,8 @@ services:
       interval: 5s
       timeout: 10s
       retries: 60
+    volumes:
+      - ./dbinit:/dbinit
 
   backend:
     image: registry.forge.grandlyon.com/web-et-numerique/llle_project/backoffice-server:dev

package.json

@@ -60,6 +60,7 @@
     "@types/html-to-draftjs": "^1.4.0",
     "@types/react-draft-wysiwyg": "^1.13.3",
     "axios": "^0.21.1",
+    "dayjs": "^1.10.7",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
     "html-to-draftjs": "^1.5.0",

src/components/Prices/PriceRow.tsx

+import React from 'react'
+import { IPrice } from '../../models/price.model'
+import editing from '../../assets/icons/editing.png'
+
+interface PriceSectionProps {
+  getDate: (date: string) => string
+  setPriceToSave: React.Dispatch<React.SetStateAction<IPrice>>
+  priceToSave: IPrice
+  price: IPrice
+  prices: IPrice[]
+  index: number
+  isNextPrice?: boolean
+}
+
+const PriceRow: React.FC<PriceSectionProps> = ({
+  getDate,
+  setPriceToSave,
+  priceToSave,
+  price,
+  prices,
+  index,
+  isNextPrice,
+}: PriceSectionProps) => {
+  const editableLimit: number = 3
+
+  return (
+    <>
+      <li
+        className={
+          priceToSave.startDate === price.startDate
+            ? 'flex-bloc price-selected'
+            : 'flex-bloc'
+        }
+      >
+        <div className="prix">
+          {price.price === '' ? '----' : price.price} €
+        </div>
+        <p>
+          à partir de :{' '}
+          <span className="capital">{getDate(price.startDate)}</span>
+        </p>
+        {index < editableLimit - 1 && (
+          <img
+            src={editing}
+            onClick={() => setPriceToSave(isNextPrice ? price : prices[index])}
+            alt="edit-icon"
+          />
+        )}
+      </li>
+      <hr></hr>
+    </>
+  )
+}
+
+export default PriceRow

src/components/Prices/PriceSection.tsx

+import React, { useCallback, useContext, useEffect, useState } from 'react'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import { FluidType } from '../../enum/fluidTypes'
+import { FrequencyInMonth } from '../../enum/frequency.enum'
+import { UserContext, UserContextProps } from '../../hooks/userContext'
+import { IPrice } from '../../models/price.model'
+import { PricesService } from '../../services/prices.service'
+import arrowDown from '../../assets/icons/down-arrow.png'
+
+import Loader from '../Loader/Loader'
+import './prices.scss'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import PriceRow from './PriceRow'
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+interface PriceSectionProps {
+  fluid: FluidType
+  frequency: FrequencyInMonth
+}
+
+const PriceSection: React.FC<PriceSectionProps> = ({
+  fluid,
+  frequency,
+}: PriceSectionProps) => {
+  const [prices, setPrices] = useState<IPrice[]>([])
+  const [nextPrice, setNextPrice] = useState<IPrice>()
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [refreshData, setRefreshData] = useState<boolean>(false)
+  const [showHistory, setShowHistory] = useState<boolean>(false)
+  const [showFullList, setShowFullList] = useState<boolean>(false)
+  const [priceToSave, setPriceToSave] = useState<IPrice>({
+    fluidType: fluid,
+    price: '',
+    startDate: '',
+    endDate: null,
+  })
+  const { user }: Partial<UserContextProps> = useContext(UserContext)
+  const maxPerList: number = 8
+
+  const handlePriceSelection = useCallback((val: string) => {
+    if (val === '') val = '0'
+    val = val.replace(/,/g, '.')
+    val = val.replace(/([^0-9.]+)/, '')
+    setPriceToSave((prev) => {
+      return { ...prev, price: val }
+    })
+  }, [])
+
+  const savePrice = useCallback(async () => {
+    if (
+      priceToSave &&
+      user &&
+      priceToSave.price !== '0' &&
+      priceToSave.price !== ''
+    ) {
+      const priceService = new PricesService()
+      const formattedPrice = {
+        ...priceToSave,
+        price: parseFloat(priceToSave.price as string),
+      }
+      await priceService.savePrice(formattedPrice, user.xsrftoken)
+      setRefreshData(true)
+    }
+  }, [priceToSave, user])
+
+  const toggleHistory = useCallback(() => {
+    setShowHistory((prev) => !prev)
+  }, [])
+
+  const getDate = useCallback((isoString: string): string => {
+    const date = new Date(isoString)
+    const month = date.toLocaleString('fr', { month: 'long' })
+    const year = date.toLocaleString('fr', { year: 'numeric' })
+    return `${month} ${year}`
+  }, [])
+
+  const toggleFullList = useCallback(() => {
+    setShowFullList((prev) => !prev)
+  }, [])
+
+  useEffect(() => {
+    let subscribed = true
+    setIsLoading(true)
+    async function getPrices() {
+      const priceService = new PricesService()
+      const pricesByFluid = await priceService.getPricesByFluid(fluid)
+      if (pricesByFluid.length) {
+        const nextPriceToCreate: IPrice = {
+          fluidType: fluid,
+          price: '',
+          startDate: '',
+          endDate: null,
+        }
+        // Set the correct for the next price to create
+        const date: string = dayjs(pricesByFluid[0].startDate)
+          .utc(true)
+          .tz('Europe/Paris')
+          .add(frequency, 'month')
+          .startOf('day')
+          .format('YYYY-MM-DDTHH:mm:ss[Z]')
+
+        nextPriceToCreate.startDate = date
+        if (subscribed) {
+          setPrices(pricesByFluid)
+          setPriceToSave(nextPriceToCreate)
+          setNextPrice(nextPriceToCreate)
+        }
+        setIsLoading(false)
+      }
+    }
+    getPrices()
+
+    return () => {
+      subscribed = false
+      setRefreshData(false)
+    }
+  }, [refreshData, frequency, fluid])
+
+  if (isLoading) return <Loader></Loader>
+  if (!prices.length) return <section> Aucun prix trouvé</section>
+  return (
+    <section>
+      <h2>
+        {fluid === FluidType.ELECTRICITY && 'Electricité'}
+        {fluid === FluidType.WATER && 'Eau'}
+        {fluid === FluidType.GAS && 'Gaz'}
+      </h2>
+      <hr className="price-separator" />
+      <div className="flex-bloc">
+        <p>Nouveau prix : </p>
+        <input
+          className="input-dark price-select"
+          type="text"
+          value={priceToSave.price.toString()}
+          onChange={(e) => handlePriceSelection(e.target.value)}
+          placeholder={priceToSave.price === '' ? 'Saisir le nouveau prix' : ''}
+        />
+        <span className="euro">€</span>
+
+        <div className="flex-bloc startDate">
+          <p>A partir de : </p>
+          <p className="date">
+            <span className="capital">{getDate(priceToSave.startDate)}</span>
+          </p>
+        </div>
+      </div>
+      <button
+        className="btnValid"
+        onClick={savePrice}
+        disabled={priceToSave.price === '0' || priceToSave.price === ''}
+      >
+        Sauvegarder
+      </button>
+      <div className="history">
+        <button onClick={toggleHistory} className={showHistory ? 'active' : ''}>
+          <span>Voir l'historique</span>
+          <img
+            src={arrowDown}
+            className={showHistory ? 'icon-active' : ''}
+            alt="arrow-icon"
+          />
+        </button>
+        {showHistory && (
+          <ul className={showHistory ? 'active' : ''}>
+            {nextPrice && (
+              <PriceRow
+                getDate={getDate}
+                priceToSave={priceToSave}
+                price={nextPrice}
+                prices={prices}
+                setPriceToSave={setPriceToSave}
+                index={0}
+                isNextPrice={true}
+              />
+            )}
+            {prices.map((price, i) => {
+              return (
+                <div
+                  key={i}
+                  className={
+                    i > maxPerList && !showFullList ? 'price-hidden' : ''
+                  }
+                >
+                  <PriceRow
+                    getDate={getDate}
+                    priceToSave={priceToSave}
+                    price={price}
+                    prices={prices}
+                    setPriceToSave={setPriceToSave}
+                    index={i}
+                  />
+                  {i === maxPerList && !showFullList && (
+                    <button onClick={toggleFullList} className="showButton">
+                      En voir plus
+                    </button>
+                  )}
+                </div>
+              )
+            })}
+            {showFullList && (
+              <button onClick={toggleFullList} className="showButton">
+                En voir moins
+              </button>
+            )}
+          </ul>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default PriceSection

src/components/Prices/Prices.tsx

+import React from 'react'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import { FluidType } from '../../enum/fluidTypes'
+import { FrequencyInMonth } from '../../enum/frequency.enum'
+import './prices.scss'
+import PriceSection from './PriceSection'
+const Prices: React.FC = () => {
+  return (
+    <>
+      <div className="header">
+        <p className="title pagetitle">Prix des fluides</p>
+      </div>
+      <div className="prices">
+        <PriceSection
+          fluid={FluidType.ELECTRICITY}
+          frequency={FrequencyInMonth.ELECTRICITY}
+        />
+        <PriceSection
+          fluid={FluidType.WATER}
+          frequency={FrequencyInMonth.WATER}
+        />
+        <PriceSection fluid={FluidType.GAS} frequency={FrequencyInMonth.GAS} />
+      </div>
+    </>
+  )
+}
+
+export default Prices

src/components/Prices/prices.scss

+@import '../../styles/config/typography.scss';
+@import '../../styles/config/layout.scss';
+@import '../../styles/config/breakpoints';
+@import '../../styles/config/colors';
+
+.prices {
+  margin-top: $navigator-height;
+  padding: 1rem;
+  .title {
+    margin: 1rem 0;
+  }
+  .capital {
+    text-transform: capitalize;
+  }
+  h2 {
+    margin-bottom: 1rem;
+    color: $gold;
+  }
+  .price-separator {
+    margin: 1rem 0;
+    background: white;
+  }
+  .flex-bloc {
+    display: flex;
+    align-items: center;
+    .price-select {
+      position: relative;
+    }
+    .euro {
+      display: block;
+      margin-left: 0.5rem;
+      font-weight: bold;
+    }
+    .startDate {
+      margin-left: 1rem;
+      .date {
+        margin-left: 0.5rem;
+        color: $gold;
+        font-weight: bold;
+      }
+    }
+  }
+  section {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    .history {
+      button {
+        @include baseButton();
+        background: $grey-dark;
+        border: solid 1px $gold;
+        display: flex;
+        align-items: center;
+        &:hover {
+          background: $dark-background;
+          opacity: 0.8;
+        }
+        &.active {
+          border-radius: 5px 5px 0 0;
+        }
+        img {
+          width: 20px;
+          margin-left: 0.5rem;
+        }
+        span {
+          color: $gold;
+        }
+      }
+      ul {
+        transition: all 300ms ease;
+        background: $grey-dark;
+        border: solid 1px $gold;
+        padding: 1rem;
+        .price-hidden {
+          display: none;
+        }
+        li {
+          transition: all 300ms ease;
+          margin: 0.5rem 0;
+          padding: 0.5rem;
+          .prix {
+            transition: all 300ms ease;
+            font-weight: bold;
+            min-width: 120px;
+          }
+          p,
+          p span {
+            transition: all 300ms ease;
+            margin-left: 1rem;
+          }
+          img {
+            cursor: pointer;
+            width: 22px;
+            margin-left: auto;
+            transition: all 300ms ease;
+          }
+        }
+        .price-selected {
+          background: $gold;
+          .prix,
+          p,
+          p span {
+            color: black;
+          }
+        }
+        hr {
+          margin: 0;
+          background: white;
+        }
+        .showButton {
+          text-align: center;
+          color: $gold;
+        }
+      }
+      .icon-active {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

src/components/Routes/Routes.tsx

@@ -3,6 +3,7 @@ import { Redirect, Route, Switch } from 'react-router-dom'
 import { UserContext } from '../../hooks/userContext'
 import Editing from '../Editing/Editing'
 import Login from '../Login/Login'
+import Prices from '../Prices/Prices'
 import Settings from '../Settings/Settings'
 import PrivateRoute from './PrivateRoute'
 
@@ -14,6 +15,7 @@ const Routes: React.FC = () => {
       {user && <Redirect path="/login" to="/editing" />}
       <Route path="/login" component={Login} />
       <PrivateRoute path="/editing" component={Editing} exact />
+      <PrivateRoute path="/prices" component={Prices} exact />
       <PrivateRoute path="/settings" component={Settings} exact />
       <Redirect path="*" to="/editing" />
     </Switch>

src/constants/routes.json

@@ -3,6 +3,10 @@
     "label": "Edition",
     "path": "/editing"
   },
+  {
+    "label": "Prix",
+    "path": "/prices"
+  },
   {
     "label": "Paramètres",
     "path": "/settings"

src/enum/fluidTypes.ts

+export enum FluidType {
+  ELECTRICITY = 0,
+  WATER = 1,
+  GAS = 2,
+}

src/enum/frequency.enum.ts

+export enum FrequencyInMonth {
+  ELECTRICITY = 6,
+  WATER = 12,
+  GAS = 1,
+}

src/models/price.model.ts

+export interface IPrice {
+  fluidType: number
+  price: number | string
+  startDate: string
+  endDate: string | null
+}

src/services/prices.service.ts

+import axios from 'axios'
+import { toast } from 'react-toastify'
+import { IPrice } from '../models/price.model'
+export class PricesService {
+  /**
+   * Save the partnersInfo
+   * @param price
+   * @param token
+   */
+  public savePrice = async (price: IPrice, token: string): Promise<void> => {
+    try {
+      await axios.put(`/api/admin/prices`, price, {
+        headers: {
+          'XSRF-TOKEN': token,
+        },
+      })
+      toast.success('Price succesfully saved !')
+    } catch (e) {
+      toast.error('Failed to save price')
+      console.error(e)
+    }
+  }
+
+  /**
+   * Gets the prices by fluid
+   */
+  public getPricesByFluid = async (fluidType: number): Promise<IPrice[]> => {
+    try {
+      const { data } = await axios.get(`/api/common/prices/${fluidType}`)
+      return data
+    } catch (e) {
+      console.error('error', e)
+      return []
+    }
+  }
+}

src/styles/config/_typography.scss

@@ -46,6 +46,10 @@ $main-spacing: 4px;
   &:hover {
     background-color: #b89318;
   }
+  &:disabled {
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
 }
 .btnValid {
   @include baseButton();

yarn.lock

@@ -3716,6 +3716,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"