fix(project): fix error state for preview and demo modes (#423)

src/components/DemoConfigDialog/DemoConfigDialog.tsx

@@ -47,6 +47,7 @@ export function getConfigNavigateCallback(navigate: NavigateFunction) {
 const DemoConfigDialog = ({ query }: { query: BootstrapData }) => {
   const { data, isLoading, error, refetch, isSuccess } = query;
   const { configSource: selectedConfigSource } = data || {};
+
   const { t } = useTranslation('demo');
   const navigate = useNavigate();
   const navigateCallback = getConfigNavigateCallback(navigate);
@@ -160,7 +161,8 @@ const DemoConfigDialog = ({ query }: { query: BootstrapData }) => {
       {!isSuccess && (
         <div className={styles.configModal}>
           <ErrorPage
-            title={t('app_config_not_found')}
+            title={error?.payload?.title || t('app_config_not_found')}
+            message={error?.payload?.description || ''}
             learnMoreLabel={t('app_config_learn_more')}
             helpLink={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'}
             error={typeof state.error === 'string' ? undefined : state.error}

src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap

@@ -45,6 +45,11 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
         <main
           class="_main_8c5621"
         >
+          <p
+            class="_message_8c5621"
+          >
+            generic_error_description
+          </p>
           <form
             method="GET"
             target="/"

src/components/ErrorPage/ErrorPage.module.scss

@@ -8,7 +8,10 @@
   align-items: center;
   min-height: 70vh;
 
-  a, a:visited, a:hover, a:active {
+  a,
+  a:visited,
+  a:hover,
+  a:active {
     color: inherit;
     font-weight: var(--body-font-weight-bold);
     text-decoration: underline;
@@ -28,6 +31,10 @@
   font-size: 34px;
 }
 
+.message {
+  padding-bottom: 16px;
+}
+
 .main {
   color: variables.$white;
 
@@ -50,7 +57,6 @@
 
 .links {
   position: relative;
-
 }
 
 .stack {

src/components/ErrorPage/ErrorPage.tsx

@@ -42,7 +42,8 @@ export const ErrorPageWithoutTranslation = ({ title, children, message, learnMor
         </header>
         <main className={styles.main}>
           <>
-            {children || <p>{message || 'Try refreshing this page or come back later.'}</p>}
+            <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p>
+            {children}
             {(IS_DEVELOPMENT_BUILD || IS_DEMO_MODE || IS_PREVIEW_MODE) && helpLink && (
               <p className={styles.links}>
                 <a href={helpLink} target={'_blank'} rel={'noreferrer'}>

src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap

@@ -23,6 +23,11 @@ exports[`<ErrorPage> > renders and matches snapshot 1`] = `
       <main
         class="_main_8c5621"
       >
+        <p
+          class="_message_8c5621"
+        >
+          generic_error_description
+        </p>
         This is the content
       </main>
     </div>

src/components/Root/Root.tsx

@@ -34,17 +34,17 @@ const DemoContentLoader = ({ query }: { query: BootstrapData }) => {
     return <LoadingOverlay />;
   }
 
-  const { configSource, settings } = data || {};
+  const { configSource } = data || {};
 
   return (
     <>
-      {/*Show the error page when error except in demo mode (the demo mode shows its own error)*/}
+      {/* Show the error page when error except in demo mode (the demo mode shows its own error) */}
       {!IS_DEMO_OR_PREVIEW && error && (
         <ErrorPage title={error?.payload?.title} message={error?.payload?.description} error={error} helpLink={error?.payload?.helpLink} />
       )}
-      {IS_DEMO_OR_PREVIEW && settings && <DemoConfigDialog query={query} />}
+      {IS_DEMO_OR_PREVIEW && <DemoConfigDialog query={query} />}
       {/* Config select control to improve testing experience */}
-      {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && settings && <DevConfigSelector selectedConfig={configSource} />}
+      {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && <DevConfigSelector selectedConfig={configSource} />}
     </>
   );
 };

src/stores/AppController.ts

@@ -65,11 +65,12 @@ export default class AppController {
   initializeApp = async () => {
     const settings = await this.settingsService.initialize();
     const configSource = this.settingsService.getConfigSource(settings);
-    const config = await this.loadAndValidateConfig(configSource);
 
     // update settings in the config store
     useConfigStore.setState({ settings });
 
+    const config = await this.loadAndValidateConfig(configSource);
+
     if (config.features?.continueWatchingList && config.content.some((el) => el.type === PersonalShelf.ContinueWatching)) {
       await getModule(WatchHistoryController).initialize();
     }