activateHalfHourLoad absolute position

With background transparency

src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx

@@ -7,6 +7,7 @@ import { TimeStep } from 'services/dataConsumptionContracts'
 import { TypeChallenge, UserChallenge } from 'services/dataChallengeContracts'
 import ConsumptionDataManager from 'services/consumptionDataManagerService'
 import FluidChartContent from 'components/ContentComponents/FluidChart/FluidChartContent'
+import ActivateHalfHourLoad from 'components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad'
 
 interface FluidChartContainerProps {
   timeStep: TimeStep
@@ -47,10 +48,10 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
   useEffect(() => {
     let subscribed = true
     async function loadData() {
-      const activateHalfHourLoad = await consumptionDataManager.checkDoctypeEntries(
+      const activateHalfHourLoad = !(await consumptionDataManager.checkDoctypeEntries(
         FluidType.ELECTRICITY,
         TimeStep.HALF_AN_HOUR
-      )
+      ))
       const data = await consumptionDataManager.fetchLastDateData(fluidTypes)
       const dataWithAllFluids = await consumptionDataManager.fetchLastDateData(
         fluidTypes,
@@ -113,6 +114,9 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
       {isLoaded ? (
         <div className="fc-root">
           <div className="fc-content">
+            {isMinuteBlocked && timeStep === 10 && (
+              <ActivateHalfHourLoad timeStep={timeStep} />
+            )}
             <FluidChartContent
               referenceDate={referenceDate}
               lastDataDate={lastDataDate}

src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx

@@ -13,10 +13,11 @@ const ActivateHalfHourLoad = ({ t }: ActivateHalfHourLoadProps) => {
 
   return (
     <div className="cta-box">
-      <div className="header-text text-16-normal">
+      <div className="cta-box-header header-text text-16-normal">
         {t('timestep.activate.enedis.info')}
       </div>
       <StyledButton
+        className="cta-box-button"
         type="submit"
         color="primary"
         onClick={() => window.open(siteLink, '_blank')}

src/components/ContentComponents/FluidChart/FluidChartContent.tsx

@@ -143,10 +143,6 @@ const FluidChartContent: React.FC<FluidChartContentProps> = ({
         />
       </div>
 
-      {activateHalfHourLoad && timeStep === 10 && (
-        <ActivateHalfHourLoad timeStep={timeStep} />
-      )}
-
       {isDataLoaded && (
         <FluidChartSwipe
           fluidTypes={fluidTypes}

src/services/consumptionDataManagerService.ts

@@ -293,9 +293,9 @@ export default class ConsumptionDataManager implements IConsumptionDataManager {
   ): Promise<boolean> {
     const queryResult = await this._queryRunner.getEntries(fluideType, timeStep)
     if (queryResult.length > 0) {
-      return false
+      return true
     }
-    return true
+    return false
   }
 
   private aggregateGraphData(

src/styles/base/_layout.scss

@@ -123,9 +123,28 @@ body {
 }
 
 .cta-box {
-  width: 100%;
-  opacity: 1;
-  color: $text-bright
+  background-color:rgba(18, 18, 18, 0.7);
+  position: absolute;
+
+  padding: 1.5rem 1rem 1rem 0rem;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 50%;
+  .cta-box-header {
+    text-align: center;
+    font-weight: bold;
+    letter-spacing: 0.2px;
+    margin-bottom: 1.5em;
+    color: $text-bright;
+  }
+  .cta-box-button {
+    margin-left: auto;
+    margin-right: auto;
+    color: black;
+    width: 80%;
+  }
 }
 
 [role='main'] {