Compare revisions

Bastien DUMONT · Bastien DUMONT · Bastien DUMONT · 1fca8231 · 1fca8231 · 1fca8231
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -86,6 +86,7 @@ module.exports = {
    'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }],
    'react/self-closing-comp': 'warn',
    'react/jsx-curly-brace-presence': ['error'],
+    'react/jsx-no-useless-fragment': ['error'],
    // Rule to suggest using useAppDispatch instead of regular useDispatch
    'no-restricted-imports': 'off',

--- a/package.json
+++ b/package.json
@@ -48,11 +48,11 @@
    "@sentry/react": "^8.26.0",
    "classnames": "^2.5.1",
    "cozy-bar": "10.0.0",
-    "cozy-client": "48.21.0",
+    "cozy-client": "49.1.1",
    "cozy-device-helper": "3.1.0",
    "cozy-flags": "4.0.0",
    "cozy-harvest-lib": "9.26.14",
-    "cozy-intent": "^2.22.0",
+    "cozy-intent": "^2.23.0",
    "cozy-keys-lib": ">=6.0.0",
    "cozy-logger": ">1.7.0",
    "cozy-realtime": "5.0.1",

--- a/src/components/Action/ActionList/ActionList.tsx
+++ b/src/components/Action/ActionList/ActionList.tsx
@@ -42,23 +42,21 @@ const ActionList = ({
    }
  }, [client, isProfileTypeCompleted, fluidTypes])
-  return (
+  if (actions) {
-    <>
+    return (
-      {actions && (
+      <div className="action-list-container">
-        <div className="action-list-container">
+        {actions.map(action => (
-          {actions.map(action => (
+          <ActionCard
-            <ActionCard
+            key={action.id}
-              key={action.id}
+            action={action}
-              action={action}
+            setSelectedAction={setSelectedAction}
-              setSelectedAction={setSelectedAction}
+            setShowList={setShowList}
-              setShowList={setShowList}
+            setFocus={setFocus}
-              setFocus={setFocus}
+          />
-            />
+        ))}
-          ))}
+      </div>
-        </div>
+    )
-      )}
+  }
-    </>
-  )
 }
 export default ActionList
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -75,78 +75,76 @@ const TotalAnalysisChart = ({
  )
  return (
-    <>
+    <div
-      <div
+      className="totalAnalysis-container"
-        className="totalAnalysis-container"
+      style={{
-        style={{
+        minHeight: radius + 100,
-          minHeight: radius + 100,
+      }}
-        }}
+    >
-      >
+      <div className="text-24-normal title">{t('analysis_pie.total')}</div>
-        <div className="text-24-normal title">{t('analysis_pie.total')}</div>
-        {isLoading && <Loader />}
+      {isLoading && <Loader />}
-        {!isLoading && !dataLoadValueDetailArray && emptyPieChart()}
+      {!isLoading && !dataLoadValueDetailArray && emptyPieChart()}
-        {!isLoading && dataLoadValueDetailArray && (
+      {!isLoading && dataLoadValueDetailArray && (
-          <>
+        <>
-            <PieChart
+          <PieChart
-              dataloadValueDetailArray={dataLoadValueDetailArray}
+            dataloadValueDetailArray={dataLoadValueDetailArray}
-              radius={radius}
+            radius={radius}
-              innerRadius={innerRadius}
+            innerRadius={innerRadius}
-              outerRadius={outerRadius}
+            outerRadius={outerRadius}
+          >
+            <div className="text-36-bold">
+              {formatNumberValues(totalLoadValue)}
+              <span className="euro-unit">{t('FLUID.MULTIFLUID.UNIT')}</span>
+            </div>
+            <div className="text-16-normal date">
+              {t('analysis_pie.month') +
+                getMonthNameWithPrep(analysisMonth.minus({ month: 1 }))}
+            </div>
+            <Button
+              className="btnText"
+              onClick={() => setOpenEstimationModal(true)}
+            >
+              <span
+                className="estimated"
+                dangerouslySetInnerHTML={{
+                  __html: t('analysis_pie.estimation'),
+                }}
+              />
+            </Button>
+          </PieChart>
+          <EstimatedConsumptionModal
+            open={openEstimationModal}
+            handleCloseClick={() => setOpenEstimationModal(false)}
+          />
+          {dataLoadValueDetailArray && fluidsWithData.length > 1 && (
+            <div
+              role="list"
+              aria-label={t('analysis_pie.details')}
+              className="total-card-container"
            >
-              <div className="text-36-bold">
+              {dataLoadValueDetailArray.map((dataload, index) => (
-                {formatNumberValues(totalLoadValue)}
+                <div key={index} role="listitem" className="total-card">
-                <span className="euro-unit">{t('FLUID.MULTIFLUID.UNIT')}</span>
+                  <div className="text-18-bold fluidconso">
-              </div>
+                    {dataload.value !== -1
-              <div className="text-16-normal date">
+                      ? `${formatNumberValues(dataload.value)} €`
-                {t('analysis_pie.month') +
+                      : '--- €'}
-                  getMonthNameWithPrep(analysisMonth.minus({ month: 1 }))}
-              </div>
-              <Button
-                className="btnText"
-                onClick={() => setOpenEstimationModal(true)}
-              >
-                <span
-                  className="estimated"
-                  dangerouslySetInnerHTML={{
-                    __html: t('analysis_pie.estimation'),
-                  }}
-                />
-              </Button>
-            </PieChart>
-            <EstimatedConsumptionModal
-              open={openEstimationModal}
-              handleCloseClick={() => setOpenEstimationModal(false)}
-            />
-            {dataLoadValueDetailArray && fluidsWithData.length > 1 && (
-              <div
-                role="list"
-                aria-label={t('analysis_pie.details')}
-                className="total-card-container"
-              >
-                {dataLoadValueDetailArray.map((dataload, index) => (
-                  <div key={index} role="listitem" className="total-card">
-                    <div className="text-18-bold fluidconso">
-                      {dataload.value !== -1
-                        ? `${formatNumberValues(dataload.value)} €`
-                        : '--- €'}
-                    </div>
-                    <StyledIcon
-                      className="euro-fluid-icon"
-                      icon={getNavPicto(index, true, true)}
-                      size={38}
-                    />
-                    <div className="text-16-normal">
-                      {t(`FLUID.${FluidType[index]}.LABEL`)}
-                    </div>
                  </div>
-                ))}
+                  <StyledIcon
-              </div>
+                    className="euro-fluid-icon"
-            )}
+                    icon={getNavPicto(index, true, true)}
-          </>
+                    size={38}
-        )}
+                  />
-      </div>
+                  <div className="text-16-normal">
-    </>
+                    {t(`FLUID.${FluidType[index]}.LABEL`)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
  )
 }

--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -42,18 +42,20 @@ export const App = ({ tracker }: AppProps) => {
    <>
      <SkipLink />
      <Layout>
-        <SplashRoot>
+        <>
-          {termsStatus.accepted && (
+          <SplashRoot>
-            <>
+            {termsStatus.accepted && (
-              <WelcomeModal open={!onboarding.isWelcomeSeen} />
+              <>
-              <Navbar />
+                <WelcomeModal open={!onboarding.isWelcomeSeen} />
-            </>
+                <Navbar />
-          )}
+              </>
-          <main id="app-content" className="app-content" tabIndex={-1}>
+            )}
-            <AppRoutes termsStatus={termsStatus} />
+            <main id="app-content" className="app-content" tabIndex={-1}>
-          </main>
+              <AppRoutes termsStatus={termsStatus} />
-        </SplashRoot>
+            </main>
-        {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
+          </SplashRoot>
+          {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
+        </>
      </Layout>
    </>
  )

--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
@@ -49,21 +49,21 @@ const DataloadSectionValue = ({
  const formattedValue = formatNumberValues(dataload.value, FLUIDNAME, true)
+  if (Number(formattedValue) >= 1000) {
+    return (
+      <>
+        {formatNumberValues(dataload.value, FLUIDNAME)}
+        <span className="text-18-normal">
+          {t(`FLUID.${FLUIDNAME}.MEGAUNIT`)}
+        </span>
+      </>
+    )
+  }
  return (
    <>
-      {Number(formattedValue) >= 1000 ? (
+      {formatNumberValues(dataload.value)}
-        <>
+      <span className="text-18-normal">{t(`FLUID.${FLUIDNAME}.UNIT`)}</span>
-          {formatNumberValues(dataload.value, FLUIDNAME)}
-          <span className="text-18-normal">
-            {t(`FLUID.${FLUIDNAME}.MEGAUNIT`)}
-          </span>
-        </>
-      ) : (
-        <>
-          {formatNumberValues(dataload.value)}
-          <span className="text-18-normal">{t(`FLUID.${FLUIDNAME}.UNIT`)}</span>
-        </>
-      )}
    </>
  )
 }

--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
@@ -26,7 +26,7 @@ const InfoDataConsumptionVisualizer = ({
  const { moveToLatestDate } = useMoveToLatestDate(lastDataDate)
  if (!dataload) {
-    return <></>
+    return null
  }
  if (
@@ -79,7 +79,7 @@ const InfoDataConsumptionVisualizer = ({
    )
  }
-  return <></>
+  return null
 }
 export default InfoDataConsumptionVisualizer
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -48,15 +48,12 @@ const DateNavigator = ({
      />
      <div className="date-navigator-format">
-        {inlineDateDisplay ? (
+        {inlineDateDisplay && formattedDate[0] && formattedDate[1] && (
-          <>
+          <div className="date-navigator-format-date text-16-bold">
-            {formattedDate[0] && formattedDate[1] && (
+            {formattedDate[0]} {formattedDate[1]}
-              <div className="date-navigator-format-date text-16-bold">
+          </div>
-                {formattedDate[0]} {formattedDate[1]}
+        )}
-              </div>
+        {!inlineDateDisplay && (
-            )}
-          </>
-        ) : (
          <>
            {formattedDate[0] && (
              <div className="date-navigator-format-date text-16-bold timeRange">

--- a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
@@ -51,30 +51,28 @@ const DuelUnlocked = ({ userChallenge }: { userChallenge: UserChallenge }) => {
  }, [userChallenge])
  return (
-    <>
+    <div className="duel-unlocked-container">
-      <div className="duel-unlocked-container">
+      <StyledIcon className="duel-icon" icon={duelIcon} size={219} />
-        <StyledIcon className="duel-icon" icon={duelIcon} size={219} />
+      <div className="duel-description text-20-italic">{`"${description}"`}</div>
-        <div className="duel-description text-20-italic">{`"${description}"`}</div>
+      <div className="duel-title text-16-normal">
-        <div className="duel-title text-16-normal">
+        {userChallenge.duel.title}
-          {userChallenge.duel.title}
-        </div>
-        <div className="duel-average-info text-18-normal">
-          {t('duel.average_info', {
-            average,
-            smartCount: average,
-          })}
-        </div>
-        <div className="button-start">
-          <Button
-            aria-label={t('duel.accessibility.button_start_duel')}
-            onClick={launchDuel}
-            className="btnSecondary"
-          >
-            {t('duel.button_start')}
-          </Button>
-        </div>
      </div>
-    </>
+      <div className="duel-average-info text-18-normal">
+        {t('duel.average_info', {
+          average,
+          smartCount: average,
+        })}
+      </div>
+      <div className="button-start">
+        <Button
+          aria-label={t('duel.accessibility.button_start_duel')}
+          onClick={launchDuel}
+          className="btnSecondary"
+        >
+          {t('duel.button_start')}
+        </Button>
+      </div>
+    </div>
  )
 }

--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -85,26 +85,24 @@ const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
  }
  return (
-    <>
+    <div className="exploration-container">
-      <div className="exploration-container">
+      <div className="exploration-begin-container">
-        <div className="exploration-begin-container">
+        <StyledIcon
-          <StyledIcon
+          className="exploration-icon"
-            className="exploration-icon"
+          icon={explorationIcon}
-            icon={explorationIcon}
+          size={180}
-            size={180}
+        />
-          />
+        <StarsContainer
-          <StarsContainer
+          result={userChallenge.progress.explorationProgress}
-            result={userChallenge.progress.explorationProgress}
+          isQuizBegin={true}
-            isQuizBegin={true}
+        />
-          />
+        <div className="exploration-explanation text-18-bold">
-          <div className="exploration-explanation text-18-bold">
+          <div>{userChallenge.exploration.description}</div>
-            <div>{userChallenge.exploration.description}</div>
+          <div>{userChallenge.exploration.complementary_description}</div>
-            <div>{userChallenge.exploration.complementary_description}</div>
-          </div>
-          {renderButton()}
        </div>
+        {renderButton()}
      </div>
-    </>
+    </div>
  )
 }

--- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
+++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
@@ -320,18 +320,16 @@ const DisplayDataOutdated = ({
  return (
    <div className="connection-caption text-16-normal">
      <div className="text-16-normal">
-        <>
+        {hasUpdatedToday ? (
-          {hasUpdatedToday ? (
+          // If user has already ran an update today, display a message about energy provider issue
-            // If user has already ran an update today, display a message about energy provider issue
+          <DisplayAlreadyUpdatedToday
-            <DisplayAlreadyUpdatedToday
+            fluidStatus={fluidStatus}
-              fluidStatus={fluidStatus}
+            fluidType={fluidType}
-              fluidType={fluidType}
+            lastExecutionDate={lastExecutionDate.toLocaleString()}
-              lastExecutionDate={lastExecutionDate.toLocaleString()}
+          />
-            />
+        ) : (
-          ) : (
+          <DisplayManualUpdate />
-            <DisplayManualUpdate />
+        )}
-          )}
-        </>
      </div>
    </div>
  )

--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -208,27 +208,26 @@ const KonnectorModal = ({
                        </div>
                      )}
                      {/* Show common errors for enedis */}
-                      {fluidType === FluidType.ELECTRICITY && (
+                      {fluidType === FluidType.ELECTRICITY &&
-                        <>
+                        showCommonErrors && (
-                          {!showCommonErrors ? (
+                          <div
-                            <Button
+                            className="commonErrorsList"
-                              className="btnText"
+                            dangerouslySetInnerHTML={{
-                              onClick={() => setShowCommonErrors(true)}
+                              __html: t(
-                            >
+                                'konnector_modal.show_common_error_list'
-                              {t('konnector_modal.show_common_error')}
+                              ),
-                            </Button>
+                            }}
-                          ) : (
+                          />
-                            <div
+                        )}
-                              className="commonErrorsList"
+                      {fluidType === FluidType.ELECTRICITY &&
-                              dangerouslySetInnerHTML={{
+                        !showCommonErrors && (
-                                __html: t(
+                          <Button
-                                  'konnector_modal.show_common_error_list'
+                            className="btnText"
-                                ),
+                            onClick={() => setShowCommonErrors(true)}
-                              }}
+                          >
-                            />
+                            {t('konnector_modal.show_common_error')}
-                          )}
+                          </Button>
-                        </>
+                        )}
-                      )}
                    </div>
                  )}
                  {error === KonnectorError.TERMS_VERSION_MISMATCH &&

--- a/src/components/Options/LegalNotice/LegalNoticeContent.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
@@ -5,116 +5,114 @@ import './legalNoticeView.scss'
 const LegalNoticeContent = () => {
  const { t } = useI18n()
  return (
-    <>
+    <div className="legal-notice-root">
-      <div className="legal-notice-root">
+      <div className="legal-notice-content">
-        <div className="legal-notice-content">
+        <p className="version">{t('legal.version')}</p>
-          <p className="version">{t('legal.version')}</p>
+        <p dangerouslySetInnerHTML={{ __html: t('legal.site') }} />
-          <p dangerouslySetInnerHTML={{ __html: t('legal.site') }} />
+        <p>{t('legal.adress')}</p>
-          <p>{t('legal.adress')}</p>
+        <p>{t('legal.phone')}</p>
-          <p>{t('legal.phone')}</p>
+        <p
-          <p
+          className="ln-contact"
-            className="ln-contact"
+          dangerouslySetInnerHTML={{ __html: t('legal.mail') }}
-            dangerouslySetInnerHTML={{ __html: t('legal.mail') }}
+        />
-          />
+        <div className="text-16-normal">
-          <div className="text-16-normal">
+          <div className="legal-notice-oneline">
-            <div className="legal-notice-oneline">
+            <span className="text-14-normal">{t('legal.p1b')}</span>
-              <span className="text-14-normal">{t('legal.p1b')}</span>
+            {t('legal.p1')}
-              {t('legal.p1')}
+          </div>
-            </div>
+          <div className="legal-notice-oneline">
-            <div className="legal-notice-oneline">
+            <span className="text-14-normal">{t('legal.p2b')}</span>
-              <span className="text-14-normal">{t('legal.p2b')}</span>
+            {t('legal.p2')}
-              {t('legal.p2')}
+          </div>
-            </div>
+          <div className="legal-notice-oneline">
-            <div className="legal-notice-oneline">
+            <span className="text-14-normal">{t('legal.p3b')}</span>
-              <span className="text-14-normal">{t('legal.p3b')}</span>
+            {t('legal.p3')}
-              {t('legal.p3')}
+          </div>
-            </div>
+          <div className="legal-notice-oneline">
-            <div className="legal-notice-oneline">
+            <span className="text-14-normal">{t('legal.p4b')}</span>
-              <span className="text-14-normal">{t('legal.p4b')}</span>
+            {t('legal.p4')}
-              {t('legal.p4')}
+          </div>
-            </div>
+          <div className="legal-notice-oneline">
-            <div className="legal-notice-oneline">
+            <span className="text-14-normal">{t('legal.p5b')}</span>
-              <span className="text-14-normal">{t('legal.p5b')}</span>
+            {t('legal.p5')}
-              {t('legal.p5')}
+          </div>
-            </div>
+          <div className="legal-notice-oneline">
-            <div className="legal-notice-oneline">
+            <span className="text-14-normal">{t('legal.p6b')}</span>
-              <span className="text-14-normal">{t('legal.p6b')}</span>
+            {t('legal.p6')}
-              {t('legal.p6')}
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3> {t('legal.title1')}</h3>
-              <h3> {t('legal.title1')}</h3>
+            <p>{t('legal.part1')}</p>
-              <p>{t('legal.part1')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title2')}</h3>
-              <h3>{t('legal.title2')}</h3>
+            <p>{t('legal.part2')}</p>
-              <p>{t('legal.part2')}</p>
+            <ul>
-              <ul>
+              <li>{t('legal.part2-1')}</li>
-                <li>{t('legal.part2-1')}</li>
+              <li>{t('legal.part2-2')}</li>
-                <li>{t('legal.part2-2')}</li>
+              <li>
-                <li>
+                {t('legal.part2-3')}
-                  {t('legal.part2-3')}
+                <ul>
-                  <ul>
+                  <li>{t('legal.part2-3-1')}</li>
-                    <li>{t('legal.part2-3-1')}</li>
+                  <li>{t('legal.part2-3-2')}</li>
-                    <li>{t('legal.part2-3-2')}</li>
+                  <li>{t('legal.part2-3-3')}</li>
-                    <li>{t('legal.part2-3-3')}</li>
+                  <li>{t('legal.part2-3-4')}</li>
-                    <li>{t('legal.part2-3-4')}</li>
+                  <li
-                    <li
+                    dangerouslySetInnerHTML={{ __html: t('legal.part2-3-5') }}
-                      dangerouslySetInnerHTML={{ __html: t('legal.part2-3-5') }}
+                  />
-                    />
+                </ul>
-                  </ul>
+              </li>
-                </li>
+              <li>{t('legal.part2-4')}</li>
-                <li>{t('legal.part2-4')}</li>
+            </ul>
-              </ul>
+            <p>{t('legal.part2-5')}</p>
-              <p>{t('legal.part2-5')}</p>
+            <p>{t('legal.part2-6')}</p>
-              <p>{t('legal.part2-6')}</p>
+            <ul>
-              <ul>
+              <li>{t('legal.part2-6-1')}</li>
-                <li>{t('legal.part2-6-1')}</li>
+              <li>{t('legal.part2-6-2')}</li>
-                <li>{t('legal.part2-6-2')}</li>
+              <li>{t('legal.part2-6-3')}</li>
-                <li>{t('legal.part2-6-3')}</li>
+            </ul>
-              </ul>
+            <p dangerouslySetInnerHTML={{ __html: t('legal.part2-7') }} />
-              <p dangerouslySetInnerHTML={{ __html: t('legal.part2-7') }} />
+            <p>{t('legal.part2-8')}</p>
-              <p>{t('legal.part2-8')}</p>
+            <p>{t('legal.part2-9')}</p>
-              <p>{t('legal.part2-9')}</p>
+            <p dangerouslySetInnerHTML={{ __html: t('legal.part2-10') }} />
-              <p dangerouslySetInnerHTML={{ __html: t('legal.part2-10') }} />
+            <p>{t('legal.part2-11')}</p>
-              <p>{t('legal.part2-11')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title3')}</h3>
-              <h3>{t('legal.title3')}</h3>
+            <p>{t('legal.part3-1')}</p>
-              <p>{t('legal.part3-1')}</p>
+            <p>{t('legal.part3-2')}</p>
-              <p>{t('legal.part3-2')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title4')}</h3>
-              <h3>{t('legal.title4')}</h3>
+            <p>{t('legal.part4-1')}</p>
-              <p>{t('legal.part4-1')}</p>
+            <p>{t('legal.part4-2')}</p>
-              <p>{t('legal.part4-2')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title5')}</h3>
-              <h3>{t('legal.title5')}</h3>
+            <p>{t('legal.part5')}</p>
-              <p>{t('legal.part5')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title6')}</h3>
-              <h3>{t('legal.title6')}</h3>
+            <p>{t('legal.part6')}</p>
-              <p>{t('legal.part6')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title7')}</h3>
-              <h3>{t('legal.title7')}</h3>
+            <p>{t('legal.part7-1')}</p>
-              <p>{t('legal.part7-1')}</p>
+            <p dangerouslySetInnerHTML={{ __html: t('legal.part7-2') }} />
-              <p dangerouslySetInnerHTML={{ __html: t('legal.part7-2') }} />
+            <p>{t('legal.part7-3')}</p>
-              <p>{t('legal.part7-3')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title8')}</h3>
-              <h3>{t('legal.title8')}</h3>
+            <p>{t('legal.part8')}</p>
-              <p>{t('legal.part8')}</p>
+          </div>
-            </div>
+          <div className="legal-notice-part">
-            <div className="legal-notice-part">
+            <h3>{t('legal.title9')}</h3>
-              <h3>{t('legal.title9')}</h3>
+            <p>{t('legal.part9-1')}</p>
-              <p>{t('legal.part9-1')}</p>
+            <p>{t('legal.part9-2')}</p>
-              <p>{t('legal.part9-2')}</p>
-            </div>
          </div>
        </div>
      </div>
-    </>
+    </div>
  )
 }

--- a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
@@ -47,30 +47,36 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
    }
  }, [client, fluidTypes, isCustomQuest, userChallenge.quiz.customQuestion])
-  return (
+  if (isCustomQuest && !customQuestion) {
-    <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
+    return (
-      {isCustomQuest ? (
+      <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
-        <>
+        <div className="question-loading">
-          {!customQuestion ? (
+          <Loader />
-            <div className="question-loading">
+        </div>
-              <Loader />
+      </div>
-            </div>
+    )
-          ) : (
+  }
-            <QuizQuestionContentCustom
-              userChallenge={userChallenge}
+  if (isCustomQuest && customQuestion) {
-              goBack={goBack}
+    return (
-              customQuestion={customQuestion}
+      <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
-            />
+        <QuizQuestionContentCustom
-          )}
-        </>
-      ) : (
-        <QuizQuestionContent
          userChallenge={userChallenge}
-          setIsCustomQuest={setIsCustomQuest}
          goBack={goBack}
-          focusCallback={focusMainContent}
+          customQuestion={customQuestion}
        />
-      )}
+      </div>
+    )
+  }
+  return (
+    <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
+      <QuizQuestionContent
+        userChallenge={userChallenge}
+        setIsCustomQuest={setIsCustomQuest}
+        goBack={goBack}
+        focusCallback={focusMainContent}
+      />
    </div>
  )
 }

--- a/yarn.lock
+++ b/yarn.lock
@@ -5869,11 +5869,6 @@ copy-descriptor@^0.1.0:
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
  integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
-copy-text-to-clipboard@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz#0202b2d9bdae30a49a53f898626dcc3b49ad960b"
-  integrity sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==
 copy-webpack-plugin@4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz#e7f40dd8a68477d405dd1b7a854aae324b158bae"
@@ -6068,16 +6063,16 @@ cozy-client@29.2.0:
    sift "^6.0.0"
    url-search-params-polyfill "^8.0.0"
-cozy-client@48.21.0:
+cozy-client@49.1.1:
-  version "48.21.0"
+  version "49.1.1"
-  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-48.21.0.tgz#cb51d4765ad5cc42644bdc00afff8db300a9de31"
+  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-49.1.1.tgz#076cd590fe06112a9fcfa93f9fad99269b563d5e"
-  integrity sha512-kec/fcvZ8aOEa4jbbOpaDauOOHRFGw1PihowJTCcbm8P7gOVvKFoQEcLJi/QwchngWPgNt4vcPevmokhYvRCYQ==
+  integrity sha512-ORjQzl3LZNJVh7rWqjM2quSMsG9nq3JZRrhYWVXttjrL/bq9NTQ0EhQIm6MR7yUd3fKjjlIjIs4/Vhc9gFTCow==
  dependencies:
    "@cozy/minilog" "1.0.0"
    "@types/jest" "^26.0.20"
    "@types/lodash" "^4.14.170"
    btoa "^1.2.1"
-    cozy-stack-client "^48.16.0"
+    cozy-stack-client "^49.0.0"
    date-fns "2.29.3"
    json-stable-stringify "^1.0.1"
    lodash "^4.17.13"
@@ -6193,10 +6188,10 @@ cozy-harvest-lib@9.26.14:
    react-markdown "^4.2.2"
    uuid "^3.3.2"
-cozy-intent@^2.22.0:
+cozy-intent@^2.23.0:
-  version "2.22.0"
+  version "2.23.0"
-  resolved "https://registry.yarnpkg.com/cozy-intent/-/cozy-intent-2.22.0.tgz#a4333463ca934d2a5cfe34a23b0d6f0e50d27934"
+  resolved "https://registry.yarnpkg.com/cozy-intent/-/cozy-intent-2.23.0.tgz#b6f3a407413df05c108e848b9dcb074b8780824b"
-  integrity sha512-aCIlwLuia5llX36eubgbkah3vR3709V7VFDWl2hndvdmyjZBHh1siJUlJxpA5nYayqJkLy7aC4bdfGpTetgoCQ==
+  integrity sha512-DFn0ny4B4HpOE+3PYuZTTa074gRnFHqID+XaJ3gY2OrPL2xUQKEZmmFLp2bPVWThi5FvgvsU3EQeWPHZNQPbaQ==
  dependencies:
    cozy-minilog "^3.3.1"
    post-me "0.4.5"
@@ -6406,10 +6401,10 @@ cozy-stack-client@^33.4.0:
    mime "^2.4.0"
    qs "^6.7.0"
-cozy-stack-client@^48.16.0:
+cozy-stack-client@^49.0.0:
-  version "48.16.0"
+  version "49.0.0"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-48.16.0.tgz#e8820197a0eb640e2d9061e21fad430ca5e56065"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-49.0.0.tgz#1bda328d0d62b00bb8895be5b991d59ad6b41cfc"
-  integrity sha512-JgXAsmXESCfbC+T2EiXzUoPiDNFf2ePzNFQK98ZbWorAj8G6DcggdcG83/eD4QCwmv/1jXTaUWI1euTQdYEDQg==
+  integrity sha512-mlh/hR9KsIve+et17P6WXlO33FjXftzXK8ovWAKr8zk+5FcD/wy/yxV/9Mr3Q+SSabdUbFbBIqu8kZncafUzdg==
  dependencies:
    detect-node "^2.0.4"
    mime "^2.4.0"
No results found