Footer UI Plugin Approach

package.json

@@ -53,12 +53,12 @@
     "semantic-release": "21.1.2"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
-    "@fortawesome/free-brands-svg-icons": "6.5.1",
-    "@fortawesome/free-regular-svg-icons": "6.5.1",
-    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "lodash": "^4.17.21"
+    "@openedx/frontend-plugin-framework": "^1.0.2"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0",

src/components/Footer.jsx

@@ -4,7 +4,10 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig } from '@edx/frontend-platform/config';
 import { AppContext } from '@edx/frontend-platform/react';
+import { getConfig } from '@edx/frontend-platform';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
+import FooterLinks from '../plugins/footer-links';
 import messages from './Footer.messages';
 import LanguageSelector from './LanguageSelector';
 
@@ -41,14 +44,11 @@ class SiteFooter extends React.Component {
       intl,
     } = this.props;
     const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
-    const { config } = this.context;
+    const config = getConfig();
 
     return (
-      <footer
-        role="contentinfo"
-        className="footer d-flex border-top py-3 px-4"
-      >
-        <div className="container-fluid d-flex">
+      <PluginSlot as="footer" id="mfe-global-footer" className="footer border-top py-3 px-4" role="contentinfo">
+        <PluginSlot id="default-poweredby-logo">
           <a
             className="d-block"
             href={config.LMS_BASE_URL}
@@ -60,15 +60,18 @@ class SiteFooter extends React.Component {
               alt={intl.formatMessage(messages['footer.logo.altText'])}
             />
           </a>
-          <div className="flex-grow-1" />
+        </PluginSlot>
+        <PluginSlot id="footer-middle"><FooterLinks /></PluginSlot>
+        <PluginSlot id="language_selector">
           {showLanguageSelector && (
-            <LanguageSelector
-              options={supportedLanguages}
-              onSubmit={onLanguageSelected}
-            />
+          <LanguageSelector
+            options={supportedLanguages}
+            onSubmit={onLanguageSelected}
+          />
           )}
-        </div>
-      </footer>
+        </PluginSlot>
+        <PluginSlot id="copyright_text"><span className="copyright-site mt-2">{intl.formatMessage(messages['footer.copyright.text'])}</span></PluginSlot>
+      </PluginSlot>
     );
   }
 }

src/components/Footer.messages.js

@@ -136,16 +136,31 @@ const messages = defineMessages({
     defaultMessage: 'Download the edX mobile app from Google Play',
     description: 'The label for the link to download the google version of the edX app.',
   },
+  'footer.poweredby.text': {
+    id: 'footer.poweredby.text',
+    defaultMessage: 'Powered by',
+    description: 'text for the footer',
+  },
   'footer.logo.altText': {
     id: 'footer.logo.altText',
     defaultMessage: 'Powered by Open edX',
     description: 'alt text for the footer logo.',
   },
+  'footer.tutorlogo.altText': {
+    id: 'footer.tutorlogo.altText',
+    defaultMessage: 'Runs on Tutor',
+    description: 'alt text for the footer tutor logo',
+  },
   'footer.logo.ariaLabel': {
     id: 'footer.logo.ariaLabel',
     defaultMessage: 'edX Home',
     description: 'aria-label for the footer logo.',
   },
+  'footer.copyright.text': {
+    id: 'footer.copyright.text',
+    defaultMessage: `Copyrights ©${new Date().getFullYear()}. All Rights Reserved.`,
+    description: 'copyright text for the footer',
+  },
   'footer.ariaLabel': {
     id: 'footer.ariaLabel',
     defaultMessage: 'Page Footer',

src/components/__snapshots__/Footer.test.jsx.snap

@@ -2,129 +2,148 @@
 
 exports[`<Footer /> renders correctly renders with a language selector 1`] = `
 <footer
-  className="footer d-flex border-top py-3 px-4"
+  className="footer border-top py-3 px-4"
   role="contentinfo"
 >
+  <a
+    aria-label="edX Home"
+    className="d-block"
+    href="http://localhost:18000"
+  >
+    <img
+      alt="Powered by Open edX"
+      src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+      style={
+        Object {
+          "maxHeight": 45,
+        }
+      }
+    />
+  </a>
   <div
-    className="container-fluid d-flex"
+    className="footer-links-container"
   >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
+    <div
+      className="footer-navigation-container"
     >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
-        }
+      <ul
+        className="nav nav-list"
       />
-    </a>
+    </div>
+  </div>
+  <form
+    className="form-inline"
+    onSubmit={[Function]}
+  >
     <div
-      className="flex-grow-1"
-    />
-    <form
-      className="form-inline"
-      onSubmit={[Function]}
+      className="form-group"
     >
-      <div
-        className="form-group"
+      <label
+        className="d-inline-block m-0"
+        htmlFor="site-footer-language-select"
       >
-        <label
-          className="d-inline-block m-0"
-          htmlFor="site-footer-language-select"
-        >
-          Choose Language
-        </label>
-        <select
-          className="form-control-sm mx-2"
-          defaultValue="en"
-          id="site-footer-language-select"
-          name="site-footer-language-select"
+        Choose Language
+      </label>
+      <select
+        className="form-control-sm mx-2"
+        defaultValue="en"
+        id="site-footer-language-select"
+        name="site-footer-language-select"
+      >
+        <option
+          value="en"
         >
-          <option
-            value="en"
-          >
-            English
-          </option>
-          <option
-            value="es"
-          >
-            Español
-          </option>
-        </select>
-        <button
-          className="btn btn-outline-primary btn-sm"
-          data-testid="site-footer-submit-btn"
-          type="submit"
+          English
+        </option>
+        <option
+          value="es"
         >
-          Apply
-        </button>
-      </div>
-    </form>
-  </div>
+          Español
+        </option>
+      </select>
+      <button
+        className="btn btn-outline-primary btn-sm"
+        data-testid="site-footer-submit-btn"
+        type="submit"
+      >
+        Apply
+      </button>
+    </div>
+  </form>
+  <span
+    className="copyright-site mt-2"
+  >
+    Copyrights ©2024. All Rights Reserved.
+  </span>
 </footer>
 `;
 
 exports[`<Footer /> renders correctly renders without a language selector 1`] = `
 <footer
-  className="footer d-flex border-top py-3 px-4"
+  className="footer border-top py-3 px-4"
   role="contentinfo"
 >
+  <a
+    aria-label="edX Home"
+    className="d-block"
+    href="http://localhost:18000"
+  >
+    <img
+      alt="Powered by Open edX"
+      src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+      style={
+        Object {
+          "maxHeight": 45,
+        }
+      }
+    />
+  </a>
   <div
-    className="container-fluid d-flex"
+    className="footer-links-container"
   >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
+    <div
+      className="footer-navigation-container"
     >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
-        }
+      <ul
+        className="nav nav-list"
       />
-    </a>
-    <div
-      className="flex-grow-1"
-    />
+    </div>
   </div>
+  <span
+    className="copyright-site mt-2"
+  >
+    Copyrights ©2024. All Rights Reserved.
+  </span>
 </footer>
 `;
 
 exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
 <footer
-  className="footer d-flex border-top py-3 px-4"
+  className="footer border-top py-3 px-4"
   role="contentinfo"
 >
-  <div
-    className="container-fluid d-flex"
+  <a
+    aria-label="edX Home"
+    className="d-block"
+    href="http://localhost:18000"
   >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
+    <img
+      alt="Powered by Open edX"
+      src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+      style={
+        Object {
+          "maxHeight": 45,
         }
-      />
-    </a>
-    <div
-      className="flex-grow-1"
+      }
     />
+  </a>
+  <div>
+    Loading...
   </div>
+  <span
+    className="copyright-site mt-2"
+  >
+    Copyrights ©2024. All Rights Reserved.
+  </span>
 </footer>
 `;

src/components/data/fetchFooterLinks.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getHttpClient } from '@edx/frontend-platform/auth';
+
+const useFooterLinks = () => {
+  const [data, setData] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const url = `${getConfig().LMS_BASE_URL}/api/branding/v1/footer`;
+      setLoading(true);
+      const { data: footerLinks } = await getHttpClient().get(url, {
+        headers: {
+          Accept: 'application/json',
+        },
+
+      });
+      const camelCasedData = camelCaseObject(footerLinks);
+      setData(camelCasedData);
+      setLoading(false);
+    };
+
+    fetchData();
+  }, []);
+
+  return { data, loading };
+};
+
+export default useFooterLinks;

src/plugins/footer-links/FooterLinks.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import useFooterLinks from '../../components/data/fetchFooterLinks';
+
+import { LinkComponent } from './LinkComponent';
+
+const FooterLinks = () => {
+  const { data, loading } = useFooterLinks();
+
+  if (loading) { return (<div>Loading...</div>); }
+
+  return (
+    <div className="footer-links-container">
+      <div className="footer-navigation-container">
+        <PluginSlot id="footer-links">
+          <LinkComponent data={data} />
+        </PluginSlot>
+      </div>
+    </div>
+  );
+};
+
+export default FooterLinks;