Added error display to cheatcodes if input is wrong

src/cheatcodes/pages/features/remoteBanner/CheatcodesScreenRemoteBanner.tsx

@@ -1,14 +1,36 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { CheatcodesTemplateScreen } from 'cheatcodes/components/CheatcodesTemplateScreen'
 import { RemoteBanner } from 'features/remoteBanner/components/RemoteBanner'
-import { Spacer } from 'ui/theme'
+import { remoteBannerSchema } from 'features/remoteBanner/components/remoteBannerSchema'
+import { useFeatureFlagOptions } from 'libs/firebase/firestore/featureFlags/useFeatureFlagOptions'
+import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
+import { ErrorBanner } from 'ui/components/banners/ErrorBanner'
+import { ViewGap } from 'ui/components/ViewGap/ViewGap'
+import { getSpacing } from 'ui/theme'
 
 export const CheatcodesScreenRemoteBanner = () => {
+  const { options } = useFeatureFlagOptions(RemoteStoreFeatureFlags.SHOW_REMOTE_BANNER)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    try {
+      remoteBannerSchema.validateSync(options)
+    } catch (error) {
+      setError(String(error))
+    }
+  }, [options])
+
   return (
     <CheatcodesTemplateScreen title="RemoteBanner 🆒" flexDirection="column">
-      <Spacer.Column numberOfSpaces={3} />
-      <RemoteBanner />
+      <ViewGap gap={getSpacing(3)}>
+        <RemoteBanner />
+        {error ? (
+          <ErrorBanner
+            message={`La bannière ne s‘affichera pas à cause de l’erreur suivante:\n${error}`}
+          />
+        ) : null}
+      </ViewGap>
     </CheatcodesTemplateScreen>
   )
 }

src/features/remoteBanner/components/remoteBannerSchema.ts

@@ -1,6 +1,6 @@
 import { InferType, object, string } from 'yup'
 
-const remoteBannerSchema = object({
+export const remoteBannerSchema = object({
   title: string().required(),
   subtitleWeb: string().nullable(),
   subtitleMobile: string().nullable(),