Merge pull request #34 from edx/douglashall/reduce_bundle_size

fix: remove paragon from bundle

.gitignore

@@ -4,3 +4,5 @@ node_modules
 temp
 
 .idea/
+
+src/i18n/transifex_input.json

Makefile

@@ -1,8 +1,5 @@
-extract_translations: ## no prerequisites so we can control order of operations
-	echo "We have to define this target due to tooling assumptions"
-	echo "Also we have to npm install using this hook b/c there's no other place for it in the current setup"
+requirements:
 	npm install
-	npm run-script i18n_extract
 
 i18n.extract:
     # Pulling display strings from .jsx files into .json files...
@@ -12,6 +9,12 @@ i18n.concat:
     # Gathering JSON messages into one file...
 	./src/i18n/i18n-concat.js ./temp/src ./src/i18n/transifex_input.json
 
+
+# The following make targets are required by our tooling scripts found in:
+# - https://github.com/edx/ecommerce-scripts/tree/master/transifex
+
+extract_translations: | requirements i18n.extract i18n.concat
+
 detect_changed_source_translations:
 	git diff --exit-code ./src/i18n/transifex_input.json
 
@@ -19,7 +22,9 @@ tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/frontend
 tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/frontend-component-footer/source/
 
 # push translations to Transifex, doing magic so we can include the translator comments
-push_translations: | i18n.extract
+# Note: extract_translations is a prereq that our translation script calls separately.
+push_translations:
+	tx push -s
 	# Adding translator comments...
 	# Fetching strings from Transifex...
 	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)

config/webpack.dev.config.js

@@ -1,9 +1,9 @@
 // This is the dev Webpack config. All settings here should prefer a fast build
 // time at the expense of creating larger, unoptimized bundles.
-const Merge = require('webpack-merge');
+const Merge = require('webpack-merge'); // eslint-disable-line import/no-extraneous-dependencies
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
+const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies
 
 const commonConfig = require('./webpack.common.config.js');
 

config/webpack.prod.config.js

@@ -1,9 +1,9 @@
 // This is the prod Webpack config. All settings here should prefer smaller,
 // optimized bundles at the expense of a longer build time.
-const Merge = require('webpack-merge');
+const Merge = require('webpack-merge'); // eslint-disable-line import/no-extraneous-dependencies
 const commonConfig = require('./webpack.common.config.js');
 const path = require('path');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
 
 module.exports = Merge.smart(commonConfig, {
   mode: 'production',
@@ -35,6 +35,18 @@ module.exports = Merge.smart(commonConfig, {
       amd: 'ReactDOM',
       root: 'ReactDOM',
     },
+    'react-intl': {
+      commonjs: 'react-intl',
+      commonjs2: 'react-intl',
+      amd: 'ReactIntl',
+      root: 'ReactIntl',
+    },
+    '@edx/paragon': {
+      commonjs: '@edx/paragon',
+      commonjs2: '@edx/paragon',
+      amd: 'Paragon',
+      root: 'Paragon',
+    },
   },
   plugins: [
     // Cleans the dist directory before each build

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "build": "NODE_ENV=production BABEL_ENV=production webpack  --config=config/webpack.prod.config.js",
+    "build:stats": "NODE_ENV=production BABEL_ENV=production webpack --config=config/webpack.prod.config.js --profile --progress --json > stats.json",
     "gc": "commit",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
@@ -38,7 +39,12 @@
     "@commitlint/config-angular": "^6.0.2",
     "@commitlint/prompt": "^6.0.2",
     "@commitlint/prompt-cli": "^6.0.2",
-    "@edx/paragon": "^3.8.0",
+    "@edx/paragon": "^4.2.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-regular-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
@@ -66,7 +72,7 @@
     "react": "^16.4.2",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.2.0",
-    "react-intl": "^2.8.0",
+    "react-intl": "2.x",
     "react-test-renderer": "^16.6.0",
     "reactifex": "^1.1.1",
     "sass-loader": "^6.0.6",
@@ -80,16 +86,15 @@
     "webpack-dev-server": "^3.1.9",
     "webpack-merge": "^4.2.1"
   },
+  "dependencies": {
+    "query-string": "^5.1.1"
+  },
   "peerDependencies": {
-    "@edx/paragon": "^3.8.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "html-webpack-plugin": "^3.2.0",
+    "@edx/paragon": "^4.2.4",
     "prop-types": "^15.5.10",
     "react": "^16.4.2",
     "react-dom": "^16.2.0",
-    "react-intl": "2.x",
-    "webpack": "^4.19.1",
-    "webpack-merge": "^4.2.1"
+    "react-intl": "2.x"
   },
   "jest": {
     "setupFiles": [
@@ -106,12 +111,5 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|scss)$": "identity-obj-proxy"
     }
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.17",
-    "@fortawesome/free-brands-svg-icons": "^5.8.1",
-    "@fortawesome/free-regular-svg-icons": "^5.8.1",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
-    "@fortawesome/react-fontawesome": "^0.1.4"
   }
 }

src/i18n/messages/ar.json

@@ -1,6 +1,6 @@
 {
-  "footer.site-footer.link.about": "About",
   "footer.site-footer.link.business": "{siteName} for Business",
+  "footer.site-footer.link.about": "About",
   "footer.site-footer.link.affiliates": "Affiliates",
   "footer.site-footer.link.open-source": "Open {siteName}",
   "footer.site-footer.link.careers": "Careers",

src/i18n/messages/es_419.json

@@ -1,6 +1,6 @@
 {
-  "footer.site-footer.link.about": "About",
   "footer.site-footer.link.business": "{siteName} for Business",
+  "footer.site-footer.link.about": "About",
   "footer.site-footer.link.affiliates": "Affiliates",
   "footer.site-footer.link.open-source": "Open {siteName}",
   "footer.site-footer.link.careers": "Careers",

src/i18n/messages/fr.json

@@ -1,6 +1,6 @@
 {
-  "footer.site-footer.link.about": "About",
   "footer.site-footer.link.business": "{siteName} for Business",
+  "footer.site-footer.link.about": "About",
   "footer.site-footer.link.affiliates": "Affiliates",
   "footer.site-footer.link.open-source": "Open {siteName}",
   "footer.site-footer.link.careers": "Careers",

src/i18n/messages/zh_CN.json

@@ -1,39 +1,39 @@
 {
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
+  "footer.site-footer.link.business": "商用{siteName} ",
+  "footer.site-footer.link.about": "关于",
+  "footer.site-footer.link.affiliates": "附属机构",
+  "footer.site-footer.link.open-source": "打开{siteName}",
+  "footer.site-footer.link.careers": "招才纳贤",
+  "footer.site-footer.link.news": "新闻",
+  "footer.site-footer.link.header.legal": "法律条款",
+  "footer.site-footer.link.terms-of-service": "服务条款 & 荣誉准则",
+  "footer.site-footer.link.privacy": "隐私政策",
+  "footer.site-footer.link.accessibility": "可访问策略",
+  "footer.site-footer.link.trademark": "商标政策",
+  "footer.site-footer.link.sitemap": "网站导航",
+  "footer.site-footer.link.header.connect": "连接",
+  "footer.site-footer.link.blog": "博客",
+  "footer.site-footer.link.contact-us": "联系我们",
+  "footer.site-footer.link.help-center": "帮助中心",
+  "footer.site-footer.link.media-kit": "多媒体工具箱",
+  "footer.site-footer.link.donate": "捐献",
   "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
   "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
   "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
+  "footer.site-footer.site-logo.aria-label": "{siteName} 主页",
+  "footer.site-footer.facebook.title": "脸书",
+  "footer.site-footer.facebook.screen-reader-text": "在Facebook上为 {siteName}点赞",
+  "footer.site-footer.twitter.title": "推特",
+  "footer.site-footer.twitter.screen-reader-text": "在Twitter上关注 {siteName}",
   "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
+  "footer.site-footer.youtube.screen-reader-text": "订阅{siteName} YouTube频道",
   "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
+  "footer.site-footer.linkedin.screen-reader-text": "在LinkedIn上关注{siteName}",
   "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
+  "footer.site-footer.google-plus.screen-reader-text": "在Google+上关注{siteName} ",
   "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
+  "footer.site-footer.reddit.screen-reader-text": "订阅{siteName} subreddit",
+  "footer.site-footer.apple-app-store.alt-text": "从Apple App Store下载 {siteName} 的移动客户端",
+  "footer.site-footer.google-play.alt-text": "从Google Play下载 {siteName} 的移动客户端",
+  "footer.site-footer.footer.aria-label": "页脚"
 }

src/i18n/transifex_input.json

@@ -1,39 +0,0 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}

src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { IntlProvider } from 'react-intl';
 
+/* eslint-disable import/no-extraneous-dependencies */
 import {
   faFacebookSquare,
   faTwitterSquare,
@@ -10,7 +11,9 @@ import {
   faGooglePlusSquare,
   faRedditSquare,
 } from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+/* eslint-enable import/no-extraneous-dependencies */
 
 import SiteFooter from './lib';
 import './index.scss';
@@ -63,6 +66,10 @@ const App = () => (
       siteName="edX"
       siteLogo={FooterLogo}
       marketingSiteBaseUrl="https://www.example.com"
+      enterpriseMarketingLink={{
+        url: 'https://business.edx.org',
+        queryParams: { utm_test: 'utm_test_value' },
+      }}
       supportUrl="https://www.example.com/support"
       contactUrl="https://www.example.com/contact"
       openSourceUrl="https://www.example.com/open"
@@ -85,6 +92,7 @@ const App = () => (
         activeLanguage: 'en',
         screenReaderLabel: 'Choose Language',
         submitLabel: 'Apply',
+        icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
         onLanguageSelected: () => {},
       }}
     />

src/lib/components/SiteFooter/SiteFooter.test.jsx

@@ -11,6 +11,7 @@ import {
   faGooglePlusSquare,
   faRedditSquare,
 } from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import FooterLogo from '../../../edx-footer.png';
@@ -70,6 +71,7 @@ const languageForm = {
   activeLanguage: 'en',
   screenReaderLabel: 'Choose Language',
   submitLabel: 'Apply',
+  icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
   onLanguageSelected: () => {},
 };
 
@@ -91,6 +93,10 @@ const completeSiteFooterComponent = mockHandleAllTrackEvents =>
         handleAllTrackEvents={mockHandleAllTrackEvents}
         supportedLanguages={supportedLanguages}
         languageForm={languageForm}
+        enterpriseMarketingLink={{
+          url: 'https://business.edx.org',
+          queryParams: { utm_test: 'utm_test_value' },
+        }}
       />
     </IntlProvider>
   );
@@ -123,6 +129,10 @@ describe('<SiteFooter />', () => {
               supportedLanguages={supportedLanguages}
               languageForm={languageForm}
               handleAllTrackEvents={jest.fn()}
+              enterpriseMarketingLink={{
+                url: 'https://business.edx.org',
+                queryParams: { utm_test: 'utm_test_value' },
+              }}
             />
           </IntlProvider>
         )).toJSON();
@@ -176,6 +186,28 @@ describe('<SiteFooter />', () => {
         )).toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    it('does not render business links', () => {
+      const tree = renderer
+        .create((
+          <IntlProvider locale="en">
+            <SiteFooter
+              siteName="example"
+              siteLogo={FooterLogo}
+              marketingSiteBaseUrl="https://www.example.com"
+              supportUrl="https://www.example.com/support"
+              contactUrl="https://www.example.com/contact"
+              openSourceUrl="https://www.example.com/open"
+              termsOfServiceUrl="https://www.example.com/terms-of-service"
+              privacyPolicyUrl="https://www.example.com/privacy-policy"
+              appleAppStoreUrl="https://store.apple.com"
+              googlePlayUrl="https://play.google.com"
+              handleAllTrackEvents={jest.fn()}
+            />
+          </IntlProvider>
+        )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 
   describe('handles analytics', () => {

src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SiteFooter /> renders correctly does not render language selector 1`] = `
+exports[`<SiteFooter /> renders correctly does not render business links 1`] = `
 <footer
   aria-label="Page Footer"
   className="footer d-flex justify-content-center border-top py-3 px-4"
@@ -42,15 +42,6 @@ exports[`<SiteFooter /> renders correctly does not render language selector 1`]
             </span>
           </a>
         </li>
-        <li>
-          <a
-            href="https://www.example.com/enterprise"
-          >
-            <span>
-              example for Business
-            </span>
-          </a>
-        </li>
         <li>
           <a
             href="https://www.example.com/affiliate-program"
@@ -246,7 +237,262 @@ exports[`<SiteFooter /> renders correctly does not render language selector 1`]
         </span>
         <br />
         <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+          <a
+            href="http://www.beian.miit.gov.cn"
+          >
+            粤ICP备17044299号-2
+          </a>
+        </span>
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`<SiteFooter /> renders correctly does not render language selector 1`] = `
+<footer
+  aria-label="Page Footer"
+  className="footer d-flex justify-content-center border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="max-width-1180 d-grid"
+  >
+    <div
+      className="area-1"
+    >
+      <a
+        aria-label="example Home"
+        href="https://www.example.com/"
+        onClick={[Function]}
+        target="_self"
+      >
+        <img
+          alt="example logo"
+          src="test-file-stub"
+        />
+      </a>
+    </div>
+    <div
+      className="area-2"
+    >
+      <h2>
+        example
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/about-us"
+          >
+            <span>
+              About
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            <span>
+              Affiliates
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            <span>
+              Open example
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            <span>
+              Careers
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            <span>
+              News
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        <span>
+          Legal
+        </span>
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            <span>
+              Terms of Service & Honor Code
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            <span>
+              Privacy Policy
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            <span>
+              Accessibility Policy
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            <span>
+              Trademark Policy
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            <span>
+              Sitemap
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        <span>
+          Connect
+        </span>
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            <span>
+              Blog
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            <span>
+              Contact Us
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            <span>
+              Help Center
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            <span>
+              Media Kit
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            <span>
+              Donate
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5"
+      >
+        <li>
+          <a
+            href="https://store.apple.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the example mobile app from the Apple App Store"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://play.google.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the example mobile app from Google Play"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
+            />
+          </a>
+        </li>
+      </ul>
+      <p>
+        <span>
+          © 2012–2019 example Inc.
+        </span>
+        <br />
+        <span>
+          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+          <a
+            href="http://www.beian.miit.gov.cn"
+          >
+            粤ICP备17044299号-2
+          </a>
         </span>
       </p>
     </div>
@@ -354,15 +600,6 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             </span>
           </a>
         </li>
-        <li>
-          <a
-            href="https://www.example.com/enterprise"
-          >
-            <span>
-              example for Business
-            </span>
-          </a>
-        </li>
         <li>
           <a
             href="https://www.example.com/affiliate-program"
@@ -722,7 +959,12 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
         </span>
         <br />
         <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+          <a
+            href="http://www.beian.miit.gov.cn"
+          >
+            粤ICP备17044299号-2
+          </a>
         </span>
       </p>
     </div>
@@ -832,7 +1074,7 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
         </li>
         <li>
           <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
           >
             <span>
               example for Business
@@ -1034,7 +1276,12 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
         </span>
         <br />
         <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+          <a
+            href="http://www.beian.miit.gov.cn"
+          >
+            粤ICP备17044299号-2
+          </a>
         </span>
       </p>
     </div>
@@ -1144,7 +1391,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
         </li>
         <li>
           <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
           >
             <span>
               example for Business
@@ -1542,7 +1789,12 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
         </span>
         <br />
         <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+          <a
+            href="http://www.beian.miit.gov.cn"
+          >
+            粤ICP备17044299号-2
+          </a>
         </span>
       </p>
     </div>

src/lib/components/SiteFooter/index.jsx

@@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Hyperlink } from '@edx/paragon';
-
-import { faLanguage } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import qs from 'query-string';
 
 import messages from './SiteFooter.messages';
 
@@ -53,6 +51,14 @@ class SiteFooter extends React.Component {
     return `${this.props.marketingSiteBaseUrl}${path}`;
   }
 
+  renderEnterpriseMarketingSiteUrl(enterpriseLinkData) {
+    const {
+      queryParams,
+      url,
+    } = enterpriseLinkData;
+    return queryParams ? `${url}/?${qs.stringify(queryParams)}` : url;
+  }
+
   renderMobileLinks() {
     const {
       intl,
@@ -95,6 +101,22 @@ class SiteFooter extends React.Component {
     return mobileLinks;
   }
 
+  renderBusinessMarketingListItem() {
+    const { siteName, enterpriseMarketingLink } = this.props;
+    return enterpriseMarketingLink && (
+      <li>
+        <a href={this.renderEnterpriseMarketingSiteUrl(enterpriseMarketingLink)}>
+          <FormattedMessage
+            id="footer.site-footer.link.business"
+            defaultMessage="{siteName} for Business"
+            description="A link that points to a business marketing page for a specified website"
+            values={{ siteName }}
+          />
+        </a>
+      </li>
+    );
+  }
+
   render() {
     const {
       intl,
@@ -134,7 +156,7 @@ class SiteFooter extends React.Component {
                 >
                   {/* eslint-disable-next-line jsx-a11y/label-has-for */}
                   <label htmlFor="site-footer-language-select">
-                    <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />
+                    {languageForm.icon}
                     <div className="sr-only">{languageForm.screenReaderLabel}</div>
                   </label>
                   <select
@@ -162,15 +184,7 @@ class SiteFooter extends React.Component {
                   />
                 </a>
               </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/enterprise')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.business"
-                    defaultMessage="{siteName} for Business"
-                    values={{ siteName }}
-                  />
-                </a>
-              </li>
+              {this.renderBusinessMarketingListItem()}
               <li>
                 <a href={this.renderMarketingSiteUrl('/affiliate-program')}>
                   <FormattedMessage
@@ -344,8 +358,8 @@ class SiteFooter extends React.Component {
               <br />
               <FormattedMessage
                 id="footer.site-footer.trademark-text"
-                defaultMessage="EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}"
-                values={{ icpLicense: '粤ICP备17044299号-2' }}
+                defaultMessage="EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 {icpLicense}"
+                values={{ icpLicense: <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a> }}
                 description="Footer trademark text"
               />
             </p>
@@ -360,6 +374,10 @@ SiteFooter.propTypes = {
   siteName: PropTypes.string,
   siteLogo: PropTypes.node,
   marketingSiteBaseUrl: PropTypes.string,
+  enterpriseMarketingLink: PropTypes.shape({
+    url: PropTypes.string,
+    queryParams: PropTypes.shape({}),
+  }),
   supportUrl: PropTypes.string,
   contactUrl: PropTypes.string,
   openSourceUrl: PropTypes.string,
@@ -382,6 +400,7 @@ SiteFooter.propTypes = {
     screenReaderLabel: PropTypes.string.isRequired,
     submitLabel: PropTypes.string.isRequired,
     onLanguageSelected: PropTypes.func.isRequired,
+    icon: PropTypes.node.isRequired,
     activeLanguage: PropTypes.string,
   }),
   handleAllTrackEvents: PropTypes.func.isRequired,
@@ -392,6 +411,7 @@ SiteFooter.defaultProps = {
   siteName: null,
   siteLogo: null,
   marketingSiteBaseUrl: null,
+  enterpriseMarketingLink: null,
   supportUrl: null,
   contactUrl: null,
   openSourceUrl: null,