From 7e178079d929afec7fb53ff4b59876de9f672fd6 Mon Sep 17 00:00:00 2001
From: Wassaf-Shahzad <wassaf.shahzad@arbisoft.com>
Date: Wed, 29 Sep 2021 17:35:07 +0500
Subject: [PATCH] Added configurable and consistant footer as per MITX
 speacifications.

---
 .env.development          | 13 ++++++++++
 src/_footer.scss          | 53 +++++++++++++++++++++++++++++++++++++++
 src/components/Footer.jsx | 26 ++++++++++++++++---
 3 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/.env.development b/.env.development
index 303bf9ede..1d3121bf2 100644
--- a/.env.development
+++ b/.env.development
@@ -17,3 +17,16 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+ABOUT_US_URL=
+PRIVACY_POLICY_URL=
+HONOR_CODE_URL=
+TERMS_OF_SERVICE_URL=
+CONTACT_URL=
+SUPPORT_CENTER_URL=
+SUPPORT_CENTER_TEXT=
+TRADEMARK_TEXT=
+SITE_URL=
+LOGO_ALT_TEXT=
+SHOW_LOGO=
+SUPPORT_EMAIL=
+
diff --git a/src/_footer.scss b/src/_footer.scss
index 2d2e859f2..8c68a77b9 100644
--- a/src/_footer.scss
+++ b/src/_footer.scss
@@ -1,5 +1,58 @@
 $gray-footer: #fcfcfc !default;
+$link-blue: #006daa;
 
 .footer {
   background-color: $gray-footer;
+
+  .copyright-col {
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.footer-sub-nav {
+  padding: 0;
+  margin: 0 0 5px;
+  list-style: none;
+  font-size: 15px;
+  line-height: 20px;
+
+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
+  @include media-breakpoint-up(md) {
+    margin: 0;
+  }
+
+  li {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+      margin: 0;
+      padding: 0 0 7px;
+      
+      &::before {
+        display: none;
+      }
+    }
+    
+    &::before {
+      content: "-";
+      padding-left: 5px;
+      padding-right: 5px;
+      color: $link-blue
+    }
+
+    &:first-child {
+      &::before {
+        display: none;
+      }
+    }
+  }
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index ba7ba7b2d..af242cfa4 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -40,6 +40,10 @@ class SiteFooter extends React.Component {
     sendTrackEvent(eventName, properties);
   }
 
+  renderLinkIfExists(value,text){
+    return value && <li><a href={value}>{text}</a></li>
+  }
+
   render() {
     const {
       supportedLanguages,
@@ -49,24 +53,40 @@ class SiteFooter extends React.Component {
     } = this.props;
     const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
     const { config } = this.context;
-
     return (
       <footer
         role="contentinfo"
         className="footer d-flex border-top py-3 px-4"
       >
         <div className="container-fluid d-flex">
+          { process.env.SHOW_LOGO && 
           <a
             className="d-block"
-            href="https://open.edx.org"
+            href={process.env.SITE_URL}
             aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
           >
             <img
               style={{ maxHeight: 45 }}
               src={logo || config.LOGO_TRADEMARK_URL}
-              alt={intl.formatMessage(messages['footer.logo.altText'])}
+              alt={ process.env.LOGO_ALT_TEXT || intl.formatMessage(messages['footer.logo.altText'])}
             />
           </a>
+          }
+          <div class="copyright-col">
+            {process.env.TRADEMARK_TEXT && <div class="text-gray-500 small">
+              {process.env.TRADEMARK_TEXT}
+            </div>}
+            <div>
+              <ul class="footer-sub-nav">
+                {this.renderLinkIfExists(process.env.ABOUT_US_URL,"About Us")}
+                {this.renderLinkIfExists(process.env.TERMS_OF_SERVICE_URL,"Terms of Service")}
+                {this.renderLinkIfExists(process.env.PRIVACY_POLICY_URL,"Privacy Policy")}
+                {this.renderLinkIfExists(process.env.HONOR_CODE_URL,"Honor Code")}
+                {this.renderLinkIfExists(process.env.Contact,"Contact")}
+                {this.renderLinkIfExists(process.env.SUPPORT_CENTER_URL,process.env.SUPPORT_CENTER_TEXT || "FAQ & Help")}
+              </ul>
+           </div>
+          </div>
           <div className="flex-grow-1" />
           {showLanguageSelector && (
             <LanguageSelector