diff --git a/.eslintrc.js b/.eslintrc.js
index e4f98e3f85ee456e7f9ef51c9f4b6b5befbc403c..045275a8b53af7093858d52a4fc25dde874034f7 100644
--- 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',
diff --git a/src/components/Action/ActionList/ActionList.tsx b/src/components/Action/ActionList/ActionList.tsx
index 13317e4ca09d3918f642ec160fe8f8566df4b91b..b400d9d86e1e9bb038eb4d538b3393af85fd3f60 100644
--- a/src/components/Action/ActionList/ActionList.tsx
+++ b/src/components/Action/ActionList/ActionList.tsx
@@ -42,23 +42,21 @@ const ActionList = ({
}
}, [client, isProfileTypeCompleted, fluidTypes])
- return (
- <>
- {actions && (
- <div className="action-list-container">
- {actions.map(action => (
- <ActionCard
- key={action.id}
- action={action}
- setSelectedAction={setSelectedAction}
- setShowList={setShowList}
- setFocus={setFocus}
- />
- ))}
- </div>
- )}
- </>
- )
+ if (actions) {
+ return (
+ <div className="action-list-container">
+ {actions.map(action => (
+ <ActionCard
+ key={action.id}
+ action={action}
+ setSelectedAction={setSelectedAction}
+ setShowList={setShowList}
+ setFocus={setFocus}
+ />
+ ))}
+ </div>
+ )
+ }
}
export default ActionList
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
index 96246cd52cda2c750dca475dfabd2e01eabcc126..fc276de1dbf7c487c08bb227427a990987784814 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -75,78 +75,76 @@ const TotalAnalysisChart = ({
)
return (
- <>
- <div
- className="totalAnalysis-container"
- style={{
- minHeight: radius + 100,
- }}
- >
- <div className="text-24-normal title">{t('analysis_pie.total')}</div>
+ <div
+ className="totalAnalysis-container"
+ style={{
+ minHeight: radius + 100,
+ }}
+ >
+ <div className="text-24-normal title">{t('analysis_pie.total')}</div>
- {isLoading && <Loader />}
- {!isLoading && !dataLoadValueDetailArray && emptyPieChart()}
- {!isLoading && dataLoadValueDetailArray && (
- <>
- <PieChart
- dataloadValueDetailArray={dataLoadValueDetailArray}
- radius={radius}
- innerRadius={innerRadius}
- outerRadius={outerRadius}
+ {isLoading && <Loader />}
+ {!isLoading && !dataLoadValueDetailArray && emptyPieChart()}
+ {!isLoading && dataLoadValueDetailArray && (
+ <>
+ <PieChart
+ dataloadValueDetailArray={dataLoadValueDetailArray}
+ radius={radius}
+ innerRadius={innerRadius}
+ 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">
- {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"
- >
- {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>
+ {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>
- ))}
- </div>
- )}
- </>
- )}
- </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>
+ ))}
+ </div>
+ )}
+ </>
+ )}
+ </div>
)
}
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 21b8c485d12854d1abdc07d48a2ea7aa782aaec2..b017acb9fc731913a3cf09494e435ef98d0b0c94 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -42,18 +42,20 @@ export const App = ({ tracker }: AppProps) => {
<>
<SkipLink />
<Layout>
- <SplashRoot>
- {termsStatus.accepted && (
- <>
- <WelcomeModal open={!onboarding.isWelcomeSeen} />
- <Navbar />
- </>
- )}
- <main id="app-content" className="app-content" tabIndex={-1}>
- <AppRoutes termsStatus={termsStatus} />
- </main>
- </SplashRoot>
- {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
+ <>
+ <SplashRoot>
+ {termsStatus.accepted && (
+ <>
+ <WelcomeModal open={!onboarding.isWelcomeSeen} />
+ <Navbar />
+ </>
+ )}
+ <main id="app-content" className="app-content" tabIndex={-1}>
+ <AppRoutes termsStatus={termsStatus} />
+ </main>
+ </SplashRoot>
+ {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
+ </>
</Layout>
</>
)
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
index 7cdd9669b3ab4403feb7450489a8196995077192..61edc3c75d8459af18b034e3ab04228ca84495d2 100644
--- 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, FLUIDNAME)}
- <span className="text-18-normal">
- {t(`FLUID.${FLUIDNAME}.MEGAUNIT`)}
- </span>
- </>
- ) : (
- <>
- {formatNumberValues(dataload.value)}
- <span className="text-18-normal">{t(`FLUID.${FLUIDNAME}.UNIT`)}</span>
- </>
- )}
+ {formatNumberValues(dataload.value)}
+ <span className="text-18-normal">{t(`FLUID.${FLUIDNAME}.UNIT`)}</span>
</>
)
}
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
index 4b7854661d29b38742a9b9d6b1058a370c7e729c..f623087cd5e8c8599c0bb66e8b6b1aa09fef1972 100644
--- 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
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index 6a4f2ce5c79d924859ff9be674443d24820ff8c9..7a936ab06ef633f3474b43650153399f538c6456 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -48,15 +48,12 @@ const DateNavigator = ({
/>
<div className="date-navigator-format">
- {inlineDateDisplay ? (
- <>
- {formattedDate[0] && formattedDate[1] && (
- <div className="date-navigator-format-date text-16-bold">
- {formattedDate[0]} {formattedDate[1]}
- </div>
- )}
- </>
- ) : (
+ {inlineDateDisplay && formattedDate[0] && formattedDate[1] && (
+ <div className="date-navigator-format-date text-16-bold">
+ {formattedDate[0]} {formattedDate[1]}
+ </div>
+ )}
+ {!inlineDateDisplay && (
<>
{formattedDate[0] && (
<div className="date-navigator-format-date text-16-bold timeRange">
diff --git a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
index c06090bbb02bd9a96dcb8d9e953fba447051249a..b8e32347e2ca2e98acd856ee07d2ecb53ca4656f 100644
--- 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">
- <StyledIcon className="duel-icon" icon={duelIcon} size={219} />
- <div className="duel-description text-20-italic">{`"${description}"`}</div>
- <div className="duel-title text-16-normal">
- {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 className="duel-unlocked-container">
+ <StyledIcon className="duel-icon" icon={duelIcon} size={219} />
+ <div className="duel-description text-20-italic">{`"${description}"`}</div>
+ <div className="duel-title text-16-normal">
+ {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>
)
}
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index b07b34a2bf577f436b41f9d242110cdcb72cd22d..ec408df24b094ec7591a5881a80fed33842fa0e0 100644
--- 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-begin-container">
- <StyledIcon
- className="exploration-icon"
- icon={explorationIcon}
- size={180}
- />
- <StarsContainer
- result={userChallenge.progress.explorationProgress}
- isQuizBegin={true}
- />
- <div className="exploration-explanation text-18-bold">
- <div>{userChallenge.exploration.description}</div>
- <div>{userChallenge.exploration.complementary_description}</div>
- </div>
- {renderButton()}
+ <div className="exploration-container">
+ <div className="exploration-begin-container">
+ <StyledIcon
+ className="exploration-icon"
+ icon={explorationIcon}
+ size={180}
+ />
+ <StarsContainer
+ result={userChallenge.progress.explorationProgress}
+ isQuizBegin={true}
+ />
+ <div className="exploration-explanation text-18-bold">
+ <div>{userChallenge.exploration.description}</div>
+ <div>{userChallenge.exploration.complementary_description}</div>
</div>
+ {renderButton()}
</div>
- </>
+ </div>
)
}
diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
index 9665182bca271f7e9b8075da3cb4ff39b336854a..d0e41143ba1b7f1640def054212e3426b726b157 100644
--- 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 ? (
- // If user has already ran an update today, display a message about energy provider issue
- <DisplayAlreadyUpdatedToday
- fluidStatus={fluidStatus}
- fluidType={fluidType}
- lastExecutionDate={lastExecutionDate.toLocaleString()}
- />
- ) : (
- <DisplayManualUpdate />
- )}
- </>
+ {hasUpdatedToday ? (
+ // If user has already ran an update today, display a message about energy provider issue
+ <DisplayAlreadyUpdatedToday
+ fluidStatus={fluidStatus}
+ fluidType={fluidType}
+ lastExecutionDate={lastExecutionDate.toLocaleString()}
+ />
+ ) : (
+ <DisplayManualUpdate />
+ )}
</div>
</div>
)
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index 862fe6a1b71a2d30c854763479f96a888f348d10..b11873d3d6f9eb5c94fe3574f3f39089f1c8b6ce 100644
--- 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 && (
- <>
- {!showCommonErrors ? (
- <Button
- className="btnText"
- onClick={() => setShowCommonErrors(true)}
- >
- {t('konnector_modal.show_common_error')}
- </Button>
- ) : (
- <div
- className="commonErrorsList"
- dangerouslySetInnerHTML={{
- __html: t(
- 'konnector_modal.show_common_error_list'
- ),
- }}
- />
- )}
- </>
- )}
+ {fluidType === FluidType.ELECTRICITY &&
+ showCommonErrors && (
+ <div
+ className="commonErrorsList"
+ dangerouslySetInnerHTML={{
+ __html: t(
+ 'konnector_modal.show_common_error_list'
+ ),
+ }}
+ />
+ )}
+ {fluidType === FluidType.ELECTRICITY &&
+ !showCommonErrors && (
+ <Button
+ className="btnText"
+ onClick={() => setShowCommonErrors(true)}
+ >
+ {t('konnector_modal.show_common_error')}
+ </Button>
+ )}
</div>
)}
{error === KonnectorError.TERMS_VERSION_MISMATCH &&
diff --git a/src/components/Options/LegalNotice/LegalNoticeContent.tsx b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
index 8239f216706e9e733c4fe262860c9f3c8b94aead..c2c804f2ae8f39e918b8a63a3bdc7bd5edf8a846 100644
--- 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-content">
- <p className="version">{t('legal.version')}</p>
- <p dangerouslySetInnerHTML={{ __html: t('legal.site') }} />
- <p>{t('legal.adress')}</p>
- <p>{t('legal.phone')}</p>
- <p
- className="ln-contact"
- dangerouslySetInnerHTML={{ __html: t('legal.mail') }}
- />
- <div className="text-16-normal">
- <div className="legal-notice-oneline">
- <span className="text-14-normal">{t('legal.p1b')}</span>
- {t('legal.p1')}
- </div>
- <div className="legal-notice-oneline">
- <span className="text-14-normal">{t('legal.p2b')}</span>
- {t('legal.p2')}
- </div>
- <div className="legal-notice-oneline">
- <span className="text-14-normal">{t('legal.p3b')}</span>
- {t('legal.p3')}
- </div>
- <div className="legal-notice-oneline">
- <span className="text-14-normal">{t('legal.p4b')}</span>
- {t('legal.p4')}
- </div>
- <div className="legal-notice-oneline">
- <span className="text-14-normal">{t('legal.p5b')}</span>
- {t('legal.p5')}
- </div>
- <div className="legal-notice-oneline">
- <span className="text-14-normal">{t('legal.p6b')}</span>
- {t('legal.p6')}
- </div>
- <div className="legal-notice-part">
- <h3> {t('legal.title1')}</h3>
- <p>{t('legal.part1')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title2')}</h3>
- <p>{t('legal.part2')}</p>
- <ul>
- <li>{t('legal.part2-1')}</li>
- <li>{t('legal.part2-2')}</li>
- <li>
- {t('legal.part2-3')}
- <ul>
- <li>{t('legal.part2-3-1')}</li>
- <li>{t('legal.part2-3-2')}</li>
- <li>{t('legal.part2-3-3')}</li>
- <li>{t('legal.part2-3-4')}</li>
- <li
- dangerouslySetInnerHTML={{ __html: t('legal.part2-3-5') }}
- />
- </ul>
- </li>
- <li>{t('legal.part2-4')}</li>
- </ul>
- <p>{t('legal.part2-5')}</p>
- <p>{t('legal.part2-6')}</p>
- <ul>
- <li>{t('legal.part2-6-1')}</li>
- <li>{t('legal.part2-6-2')}</li>
- <li>{t('legal.part2-6-3')}</li>
- </ul>
- <p dangerouslySetInnerHTML={{ __html: t('legal.part2-7') }} />
- <p>{t('legal.part2-8')}</p>
- <p>{t('legal.part2-9')}</p>
- <p dangerouslySetInnerHTML={{ __html: t('legal.part2-10') }} />
- <p>{t('legal.part2-11')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title3')}</h3>
- <p>{t('legal.part3-1')}</p>
- <p>{t('legal.part3-2')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title4')}</h3>
- <p>{t('legal.part4-1')}</p>
- <p>{t('legal.part4-2')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title5')}</h3>
- <p>{t('legal.part5')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title6')}</h3>
- <p>{t('legal.part6')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title7')}</h3>
- <p>{t('legal.part7-1')}</p>
- <p dangerouslySetInnerHTML={{ __html: t('legal.part7-2') }} />
- <p>{t('legal.part7-3')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title8')}</h3>
- <p>{t('legal.part8')}</p>
- </div>
- <div className="legal-notice-part">
- <h3>{t('legal.title9')}</h3>
- <p>{t('legal.part9-1')}</p>
- <p>{t('legal.part9-2')}</p>
- </div>
+ <div className="legal-notice-root">
+ <div className="legal-notice-content">
+ <p className="version">{t('legal.version')}</p>
+ <p dangerouslySetInnerHTML={{ __html: t('legal.site') }} />
+ <p>{t('legal.adress')}</p>
+ <p>{t('legal.phone')}</p>
+ <p
+ className="ln-contact"
+ dangerouslySetInnerHTML={{ __html: t('legal.mail') }}
+ />
+ <div className="text-16-normal">
+ <div className="legal-notice-oneline">
+ <span className="text-14-normal">{t('legal.p1b')}</span>
+ {t('legal.p1')}
+ </div>
+ <div className="legal-notice-oneline">
+ <span className="text-14-normal">{t('legal.p2b')}</span>
+ {t('legal.p2')}
+ </div>
+ <div className="legal-notice-oneline">
+ <span className="text-14-normal">{t('legal.p3b')}</span>
+ {t('legal.p3')}
+ </div>
+ <div className="legal-notice-oneline">
+ <span className="text-14-normal">{t('legal.p4b')}</span>
+ {t('legal.p4')}
+ </div>
+ <div className="legal-notice-oneline">
+ <span className="text-14-normal">{t('legal.p5b')}</span>
+ {t('legal.p5')}
+ </div>
+ <div className="legal-notice-oneline">
+ <span className="text-14-normal">{t('legal.p6b')}</span>
+ {t('legal.p6')}
+ </div>
+ <div className="legal-notice-part">
+ <h3> {t('legal.title1')}</h3>
+ <p>{t('legal.part1')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title2')}</h3>
+ <p>{t('legal.part2')}</p>
+ <ul>
+ <li>{t('legal.part2-1')}</li>
+ <li>{t('legal.part2-2')}</li>
+ <li>
+ {t('legal.part2-3')}
+ <ul>
+ <li>{t('legal.part2-3-1')}</li>
+ <li>{t('legal.part2-3-2')}</li>
+ <li>{t('legal.part2-3-3')}</li>
+ <li>{t('legal.part2-3-4')}</li>
+ <li
+ dangerouslySetInnerHTML={{ __html: t('legal.part2-3-5') }}
+ />
+ </ul>
+ </li>
+ <li>{t('legal.part2-4')}</li>
+ </ul>
+ <p>{t('legal.part2-5')}</p>
+ <p>{t('legal.part2-6')}</p>
+ <ul>
+ <li>{t('legal.part2-6-1')}</li>
+ <li>{t('legal.part2-6-2')}</li>
+ <li>{t('legal.part2-6-3')}</li>
+ </ul>
+ <p dangerouslySetInnerHTML={{ __html: t('legal.part2-7') }} />
+ <p>{t('legal.part2-8')}</p>
+ <p>{t('legal.part2-9')}</p>
+ <p dangerouslySetInnerHTML={{ __html: t('legal.part2-10') }} />
+ <p>{t('legal.part2-11')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title3')}</h3>
+ <p>{t('legal.part3-1')}</p>
+ <p>{t('legal.part3-2')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title4')}</h3>
+ <p>{t('legal.part4-1')}</p>
+ <p>{t('legal.part4-2')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title5')}</h3>
+ <p>{t('legal.part5')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title6')}</h3>
+ <p>{t('legal.part6')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title7')}</h3>
+ <p>{t('legal.part7-1')}</p>
+ <p dangerouslySetInnerHTML={{ __html: t('legal.part7-2') }} />
+ <p>{t('legal.part7-3')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title8')}</h3>
+ <p>{t('legal.part8')}</p>
+ </div>
+ <div className="legal-notice-part">
+ <h3>{t('legal.title9')}</h3>
+ <p>{t('legal.part9-1')}</p>
+ <p>{t('legal.part9-2')}</p>
</div>
</div>
</div>
- </>
+ </div>
)
}
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
index c75a4404fd1d2a967d13d37159ac0e76729b821d..d38fb0d51d186537354c5c097a67d6ca2afd4b9d 100644
--- 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 (
- <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
- {isCustomQuest ? (
- <>
- {!customQuestion ? (
- <div className="question-loading">
- <Loader />
- </div>
- ) : (
- <QuizQuestionContentCustom
- userChallenge={userChallenge}
- goBack={goBack}
- customQuestion={customQuestion}
- />
- )}
- </>
- ) : (
- <QuizQuestionContent
+ if (isCustomQuest && !customQuestion) {
+ return (
+ <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
+ <div className="question-loading">
+ <Loader />
+ </div>
+ </div>
+ )
+ }
+
+ if (isCustomQuest && customQuestion) {
+ return (
+ <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
+ <QuizQuestionContentCustom
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>
)
}