fix: use getConfig not process.env

Co-authored-by: Mena Hassan <[email protected]>
openedx · Oct 27, 2023 · c4350cc · c4350cc
1 parent c44db75
commit c4350cc
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,8 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
   <head>
-      <title>Learner Dashboard | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
-      <% if (process.env.OPTIMIZELY_URL) { %>
-        <script
-          src="<%= process.env.OPTIMIZELY_URL %>"
-        ></script>
-      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
-        <script
-          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
-        ></script>
-      <% } %>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -27,6 +27,7 @@ import fakeData from 'data/services/lms/fakeData/courses';
 import AppWrapper from 'containers/WidgetContainers/AppWrapper';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 import './App.scss';
 
@@ -41,8 +42,21 @@ export const App = () => {
   const { supportEmail } = reduxHooks.usePlatformSettingsData();
   const loadData = reduxHooks.useLoadData();
 
+  const optimizelyScript = () => {
+    if (getConfig().OPTIMIZELY_URL) {
+      return <script src={getConfig().OPTIMIZELY_URL} />;
+    } if (getConfig().OPTIMIZELY_PROJECT_ID) {
+      return (
+        <script
+          src={`${getConfig().MARKETING_SITE_BASE_URL}/optimizelyjs/${getConfig().env.OPTIMIZELY_PROJECT_ID}.js`}
+        />
+      );
+    }
+    return null;
+  };
+
   React.useEffect(() => {
-    if (authenticatedUser?.administrator || process.env.NODE_ENV === 'development') {
+    if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
       window.loadEmptyData = () => {
         loadData({ ...fakeData.globalData, courses: [] });
       };
@@ -60,12 +74,12 @@ export const App = () => {
       window.actions = actions;
       window.track = track;
     }
-    if (process.env.HOTJAR_APP_ID) {
+    if (getConfig().HOTJAR_APP_ID) {
       try {
         initializeHotjar({
-          hotjarId: process.env.HOTJAR_APP_ID,
-          hotjarVersion: process.env.HOTJAR_VERSION,
-          hotjarDebug: !!process.env.HOTJAR_DEBUG,
+          hotjarId: getConfig().HOTJAR_APP_ID,
+          hotjarVersion: getConfig().HOTJAR_VERSION,
+          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
         });
       } catch (error) {
         logError(error);
@@ -76,6 +90,8 @@ export const App = () => {
     <>
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+        {optimizelyScript()}
       </Helmet>
       <div>
         <AppWrapper>
@@ -93,7 +109,7 @@ export const App = () => {
               )}
           </main>
         </AppWrapper>
-        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
         <ZendeskFab />
       </div>
     </>

diff --git a/src/containers/LearnerDashboardHeader/BrandLogo.jsx b/src/containers/LearnerDashboardHeader/BrandLogo.jsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
-import { configuration } from '../../config';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 export const BrandLogo = () => {
@@ -15,7 +15,7 @@ export const BrandLogo = () => {
     <a href={dashboard?.url || '/'} className="mx-auto">
       <img
         className="logo py-3"
-        src={configuration.LOGO_URL}
+        src={getConfig().LOGO_URL}
         alt={formatMessage(messages.logoAltText)}
       />
     </a>

diff --git a/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx b/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
@@ -5,6 +5,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import { Icon, Hyperlink } from '@edx/paragon';
 import { ChevronRight } from '@edx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
 import { trackProductHeaderClicked } from '../optimizelyExperiment';
 import { recommendationsHeaderClicked } from '../track';
 import { executiveEducation, bootCamp } from '../constants';
@@ -44,7 +45,7 @@ const ProductCardHeader = ({ courseType }) => {
 
   const { formatMessage } = useIntl();
   const productTypeDetail = getProductTypeDetail(courseType);
-  const headerUrl = `${process.env.MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
+  const headerUrl = `${getConfig().MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
 
   return (
     <div>

diff --git a/src/widgets/ProductRecommendations/optimizely.js b/src/widgets/ProductRecommendations/optimizely.js
@@ -1,6 +1,8 @@
 import { createInstance, setLogLevel } from '@optimizely/react-sdk';
 
-const OPTIMIZELY_SDK_KEY = process.env.OPTIMIZELY_FULL_STACK_SDK_KEY;
+import { getConfig } from '@edx/frontend-platform';
+
+const OPTIMIZELY_SDK_KEY = getConfig().OPTIMIZELY_FULL_STACK_SDK_KEY;
 
 const configureClient = () => {
   setLogLevel('error');