From ca9d905a8af4c49811fb65085520d4a98b9a54af Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Wed, 10 Jan 2024 16:32:52 +0100
Subject: [PATCH] fix(project): fix error state for preview and demo modes
 (#423)

---
 src/components/DemoConfigDialog/DemoConfigDialog.tsx   |  4 +++-
 .../__snapshots__/DemoConfigDialog.test.tsx.snap       |  5 +++++
 src/components/ErrorPage/ErrorPage.module.scss         | 10 ++++++++--
 src/components/ErrorPage/ErrorPage.tsx                 |  3 ++-
 .../ErrorPage/__snapshots__/ErrorPage.test.tsx.snap    |  5 +++++
 src/components/Root/Root.tsx                           |  8 ++++----
 src/stores/AppController.ts                            |  3 ++-
 7 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/src/components/DemoConfigDialog/DemoConfigDialog.tsx
index 166cfcf0d..322c7b6fd 100644
--- a/src/components/DemoConfigDialog/DemoConfigDialog.tsx
+++ b/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}
diff --git a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 89576b5fe..52d6e97fe 100644
--- a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/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="/"
diff --git a/src/components/ErrorPage/ErrorPage.module.scss b/src/components/ErrorPage/ErrorPage.module.scss
index e902f7ce1..5931fda13 100644
--- a/src/components/ErrorPage/ErrorPage.module.scss
+++ b/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 {
diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx
index b7bb166b4..341621811 100644
--- a/src/components/ErrorPage/ErrorPage.tsx
+++ b/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'}>
diff --git a/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap b/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
index 15887cab6..249b11354 100644
--- a/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
+++ b/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>
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
index 11cf0abbe..bcf3b9011 100644
--- a/src/components/Root/Root.tsx
+++ b/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} />}
     </>
   );
 };
diff --git a/src/stores/AppController.ts b/src/stores/AppController.ts
index 74cc8c15a..846482cfb 100644
--- a/src/stores/AppController.ts
+++ b/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();
     }