EstimatedConsumptionModal.tsx

import { IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enums'
import { DateTime } from 'luxon'
import { FluidPrice } from 'models'
import React, { useEffect, useState } from 'react'
import FluidPricesService from 'services/fluidsPrices.service'
import './estimatedConsumptionModal.scss'

interface EstimatedConsumptionModalProps {
  open: boolean
  handleCloseClick: () => void
}

const EstimatedConsumptionModal = ({
  open,
  handleCloseClick,
}: EstimatedConsumptionModalProps) => {
  const { t } = useI18n()
  const client = useClient()

  const [prices, setPrices] = useState<FluidPrice[]>([])

  useEffect(() => {
    let subscribed = true
    const fluidsPricesService = new FluidPricesService(client)
    async function getAllLastPrices() {
      const prices = await fluidsPricesService.getAllLastPrices()
      if (subscribed && prices) {
        setPrices(prices)
      }
    }
    getAllLastPrices()
    return () => {
      subscribed = false
    }
  }, [client])

  return (
    <Dialog
      open={open}
      onClose={handleCloseClick}
      aria-labelledby="accessibility-title"
      classes={{
        root: 'modal-root',
        paper: 'modal-paper',
      }}
    >
      <div id="accessibility-title">
        {t('consumption_visualizer.modal.window_title')}
      </div>
      <IconButton
        aria-label={t('consumption_visualizer.modal.close')}
        className="modal-paper-close-button"
        onClick={handleCloseClick}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="estimation-modal">
        <div className="text-20-normal modal-title">
          {t('consumption_visualizer.modal.title')}
        </div>
        <div className="text-16-normal">
          {t('consumption_visualizer.modal.part1')}
        </div>
        <br />
        <div className="text-16-normal">
          {t('consumption_visualizer.modal.part2')}
        </div>
        <ul>
          <li>
            <span
              className={`${FluidType[FluidType.ELECTRICITY].toLowerCase()}`}
            >
              {t(`FLUID.${FluidType[FluidType.ELECTRICITY]}.LABEL`)}
            </span>
            {t('consumption_visualizer.modal.list1', {
              elecPrice: prices[FluidType.ELECTRICITY]?.price,
              elecPriceStartDate: DateTime.fromISO(
                prices[FluidType.ELECTRICITY]?.startDate
              )
                .setZone('utc', {
                  keepLocalTime: true,
                })
                .toLocaleString(),
            })}
          </li>
          <li>
            <span className={`${FluidType[FluidType.WATER].toLowerCase()}`}>
              {t(`FLUID.${FluidType[FluidType.WATER]}.LABEL`)}
            </span>
            {t('consumption_visualizer.modal.list3', {
              waterPrice: prices[FluidType.WATER]?.price,
              waterPriceStartDate: DateTime.fromISO(
                prices[FluidType.WATER]?.startDate
              )
                .setZone('utc', {
                  keepLocalTime: true,
                })
                .toLocaleString(),
            })}
          </li>
          <li>
            <span className={`${FluidType[FluidType.GAS].toLowerCase()}`}>
              {t(`FLUID.${FluidType[FluidType.GAS]}.LABEL`)}
            </span>
            {t('consumption_visualizer.modal.list2', {
              gasPrice: prices[FluidType.GAS]?.price,
              gasPriceStartDate: DateTime.fromISO(
                prices[FluidType.GAS]?.startDate
              )
                .setZone('utc', {
                  keepLocalTime: true,
                })
                .toLocaleString(),
            })}
          </li>
        </ul>
        <div className="text-16-normal">
          {t('consumption_visualizer.modal.part3')}
        </div>
      </div>
    </Dialog>
  )
}

export default EstimatedConsumptionModal