AA-356: add more config overrides for branding (#270 )

Remove some edX-specific branding / links (like support URLs) in favor of values from configuration. Images (sample certificates) are still branded for now. We can get them later.
fix: make LTI modals full-screen (#268 )
2020-11-10 10:24:33 -05:00 · 2020-11-03 16:04:41 -05:00
10 changed files with 85 additions and 33 deletions
--- a/.env
+++ b/.env
@@ -15,7 +15,12 @@ ORDER_HISTORY_URL=null
 REFRESH_ACCESS_TOKEN_ENDPOINT=null
 SEGMENT_KEY=null
 SITE_NAME=null
-TWITTER_URL=null
+SOCIAL_UTM_MILESTONE_CAMPAIGN=null
 STUDIO_BASE_URL=
 SUPPORT_URL=null
+SUPPORT_URL_CALCULATOR_MATH=null
+SUPPORT_URL_ID_VERIFICATION=null
+SUPPORT_URL_VERIFIED_CERTIFICATE=null
+TWITTER_HASHTAG=null
+TWITTER_URL=null
 USER_INFO_COOKIE_NAME=null
--- a/.env.development
+++ b/.env.development
@@ -15,7 +15,12 @@ PORT=2000
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
-TWITTER_URL='https://twitter.com/edXOnline'
+SOCIAL_UTM_MILESTONE_CAMPAIGN='edxmilestone'
 STUDIO_BASE_URL='http://localhost:18010'
 SUPPORT_URL='https://support.edx.org'
+SUPPORT_URL_CALCULATOR_MATH='https://support.edx.org/hc/en-us/articles/360000038428-Entering-math-expressions-in-assignments-or-the-calculator'
+SUPPORT_URL_ID_VERIFICATION='https://support.edx.org/hc/en-us/articles/206503858-How-do-I-verify-my-identity'
+SUPPORT_URL_VERIFIED_CERTIFICATE='https://support.edx.org/hc/en-us/articles/206502008-What-is-a-verified-certificate'
+TWITTER_HASHTAG='myedxjourney'
+TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
--- a/.env.test
+++ b/.env.test
@@ -14,7 +14,12 @@ PORT=2000
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
-TWITTER_URL='https://twitter.com/edXOnline'
+SOCIAL_UTM_MILESTONE_CAMPAIGN='edxmilestone'
 STUDIO_BASE_URL='http://localhost:18010'
 SUPPORT_URL='https://support.edx.org'
+SUPPORT_URL_CALCULATOR_MATH='https://support.edx.org/hc/en-us/articles/360000038428-Entering-math-expressions-in-assignments-or-the-calculator'
+SUPPORT_URL_ID_VERIFICATION='https://support.edx.org/hc/en-us/articles/206503858-How-do-I-verify-my-identity'
+SUPPORT_URL_VERIFIED_CERTIFICATE='https://support.edx.org/hc/en-us/articles/206502008-What-is-a-verified-certificate'
+TWITTER_HASHTAG='myedxjourney'
+TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
--- a/src/courseware/course/content-tools/calculator/Calculator.jsx
+++ b/src/courseware/course/content-tools/calculator/Calculator.jsx
@@ -98,21 +98,13 @@ class Calculator extends Component {
              <FormattedMessage
                tagName="h6"
                id="calculator.instructions"
-                defaultMessage="For detailed information, see {expressions_link} in the {edx_guide}."
+                defaultMessage="For detailed information, see the {expressions_link}."
                values={{
                  expressions_link: (
-                    <a href="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/completing_assignments/SFD_mathformatting.html#math-formatting">
+                    <a href={getConfig().SUPPORT_URL_CALCULATOR_MATH}>
                      <FormattedMessage
-                        id="calculator.instructions.expressions.link.title"
-                        defaultMessage="Entering Mathematical and Scientific Expressions"
-                      />
-                    </a>
-                  ),
-                  edx_guide: (
-                    <a href="https://edx-guide-for-students.readthedocs.io/en/latest/index.html">
-                      <FormattedMessage
-                        id="calculator.instructions.edx.guide.link.title"
-                        defaultMessage="edX Guide for Students"
+                        id="calculator.instructions.support.title"
+                        defaultMessage="Help Center"
                      />
                    </a>
                  ),
--- a/src/courseware/course/course-exit/CourseCelebration.jsx
+++ b/src/courseware/course/course-exit/CourseCelebration.jsx
@@ -61,12 +61,11 @@ function CourseCelebration({ intl }) {
      {intl.formatMessage(messages.dashboardLink)}
    </Hyperlink>
  );
-  // todo: remove this hardcoded link to edX support
-  const idVerificationSupportLink = getConfig().SUPPORT_URL && (
+  const idVerificationSupportLink = getConfig().SUPPORT_URL_ID_VERIFICATION && (
    <Hyperlink
      className="text-gray-700"
      style={{ textDecoration: 'underline' }}
-      destination={`${getConfig().SUPPORT_URL}/hc/en-us/articles/206503858-How-do-I-verify-my-identity`}
+      destination={getConfig().SUPPORT_URL_ID_VERIFICATION}
    >
      {intl.formatMessage(messages.idVerificationSupportLink)}
    </Hyperlink>
@@ -188,12 +187,11 @@ function CourseCelebration({ intl }) {
              values={{ price: verifiedMode.currencySymbol + verifiedMode.price }}
            />
            <br />
-            { /* todo: remove this hardcoded link to edX support */ }
-            {getConfig().SUPPORT_URL && (
+            {getConfig().SUPPORT_URL_VERIFIED_CERTIFICATE && (
              <Hyperlink
                className="text-gray-700"
                style={{ textDecoration: 'underline' }}
-                destination={`${getConfig().SUPPORT_URL}/hc/en-us/articles/206502008-What-is-a-verified-certificate`}
+                destination={getConfig().SUPPORT_URL_VERIFIED_CERTIFICATE}
              >
                {intl.formatMessage(messages.verifiedCertificateSupportLink)}
              </Hyperlink>
--- a/src/courseware/course/course-sock/CourseSock.jsx
+++ b/src/courseware/course/course-sock/CourseSock.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import LearnerQuote1 from './assets/learner-quote.png';
 import LearnerQuote2 from './assets/learner-quote2.png';
@@ -36,7 +37,10 @@ export default class CourseSock extends Component {
            <h2 className="mt-3 mb-4">
              <FormattedMessage
                id="coursesock.upsell.verifiedcert"
-                defaultMessage="edX Verified Certificate"
+                defaultMessage="{siteName} Verified Certificate"
+                values={{
+                  siteName: getConfig().SITE_NAME,
+                }}
              />
            </h2>
            <div className="row flex-row-reverse">
@@ -94,7 +98,10 @@ export default class CourseSock extends Component {
                  <li>
                    <FormattedMessage
                      id="coursesock.upsell.reason4"
-                      defaultMessage="Certificate purchases help edX continue to offer free courses"
+                      defaultMessage="Certificate purchases help {siteName} continue to offer free courses"
+                      values={{
+                        siteName: getConfig().SITE_NAME,
+                      }}
                    />
                  </li>
                </ul>
@@ -134,7 +141,10 @@ export default class CourseSock extends Component {
                <h3 className="h5">
                  <FormattedMessage
                    id="coursesock.upsell.storytitle"
-                    defaultMessage="edX Learner Stories"
+                    defaultMessage="{siteName} Learner Stories"
+                    values={{
+                      siteName: getConfig().SITE_NAME,
+                    }}
                  />
                </h3>
                <div className="media my-3">
@@ -150,8 +160,11 @@ export default class CourseSock extends Component {
                      &mdash; <FormattedMessage
                        id="coursesock.upsell.learner"
                        description="Name of learner"
-                        defaultMessage="{ name }, edX Learner"
-                        values={{ name: 'Christina Fong' }}
+                        defaultMessage="{name}, {siteName} Learner"
+                        values={{
+                          name: 'Christina Fong',
+                          siteName: getConfig().SITE_NAME,
+                        }}
                      />
                    </p>
                  </div>
@@ -169,8 +182,11 @@ export default class CourseSock extends Component {
                      &mdash; <FormattedMessage
                        id="coursesock.upsell.learner"
                        description="Name of learner"
-                        defaultMessage="{ name }, edX Learner"
-                        values={{ name: 'Cheryl Troell' }}
+                        defaultMessage="{name}, {siteName} Learner"
+                        values={{
+                          name: 'Cheryl Troell',
+                          siteName: getConfig().SITE_NAME,
+                        }}
                      />
                    </p>
                  </div>
--- a/src/courseware/course/sequence/Unit.jsx
+++ b/src/courseware/course/sequence/Unit.jsx
@@ -147,14 +147,17 @@ function Unit({
                    allow="microphone *; camera *; midi *; geolocation *; encrypted-media *"
                    frameBorder="0"
                    src={modalOptions.url}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                    }}
                  />
                )}
            </>
          )}
-          title={modalOptions.title}
          onClose={() => { setModalOptions({ open: false }); }}
          open
-          dialogClassName="modal-lg"
+          dialogClassName="modal-lti"
        />
      )}
      <div className="unit-iframe-wrapper">
--- a/src/courseware/social-share/SocialIcons.jsx
+++ b/src/courseware/social-share/SocialIcons.jsx
@@ -54,7 +54,9 @@ function SocialIcons({
    });
  };

-  const socialUtmMarketingUrl = `${marketingUrl}?utm_campaign=edxmilestone&utm_medium=social`;
+  const socialUtmCampaign = getConfig().SOCIAL_UTM_MILESTONE_CAMPAIGN
+    ? `utm_campaign=${getConfig().SOCIAL_UTM_MILESTONE_CAMPAIGN}&` : '';
+  const socialUtmMarketingUrl = `${marketingUrl}?${socialUtmCampaign}utm_medium=social`;

  return (
    <div className={`social-icons ${className}`}>
@@ -91,7 +93,7 @@ function SocialIcons({
        body={emailBody ? `${intl.formatMessage(emailBody)}\n\n` : ''}
        className="ml-2"
        subject={emailSubject ? intl.formatMessage(emailSubject, { platform: getConfig().SITE_NAME, title }) : ''}
-        url={`${marketingUrl}?utm_campaign=edxmilestone&utm_medium=email&utm_source=email`}
+        url={`${marketingUrl}?${socialUtmCampaign}utm_medium=email&utm_source=email`}
      >
        <EmailIcon round size={32} />
        <span className="sr-only">{intl.formatMessage(messages.shareEmail)}</span>
@@ -105,7 +107,7 @@ SocialIcons.defaultProps = {
  className: '',
  emailBody: messages.defaultEmailBody,
  emailSubject: null,
-  hashtags: ['myedxjourney'],
+  hashtags: [getConfig().TWITTER_HASHTAG],
  socialMessage: null,
 };

--- a/src/index.jsx
+++ b/src/index.jsx
@@ -81,8 +81,13 @@ initialize({
    config: () => {
      mergeConfig({
        INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
+        SOCIAL_UTM_MILESTONE_CAMPAIGN: process.env.SOCIAL_UTM_MILESTONE_CAMPAIGN || null,
        STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
        SUPPORT_URL: process.env.SUPPORT_URL || null,
+        SUPPORT_URL_CALCULATOR_MATH: process.env.SUPPORT_URL_CALCULATOR_MATH || null,
+        SUPPORT_URL_ID_VERIFICATION: process.env.SUPPORT_URL_ID_VERIFICATION || null,
+        SUPPORT_URL_VERIFIED_CERTIFICATE: process.env.SUPPORT_URL_VERIFIED_CERTIFICATE || null,
+        TWITTER_HASHTAG: process.env.TWITTER_HASHTAG || null,
        TWITTER_URL: process.env.TWITTER_URL || null,
        ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME || null,
      }, 'LearnerAppConfig');
--- a/src/index.scss
+++ b/src/index.scss
@@ -319,6 +319,27 @@ $primary: #1176B2;
  }
 }

+// This class forces any modals using 'modal-lti' as their dialogClassName to take up the whole
+// window (retaining padding around the edge).  Bootstrap modals don't have a full-screen
+// size like this.  Because of the hack below around react-focus-on's div, it would be better long-term to pull this into Paragon and perhaps call it "modal-full" or something like that.
+.modal-lti {
+  height: 100%;
+  max-width: 100%;
+
+  // I don't like this.  We need to set a height of 100% on a div created by react-focus-on, a
+  // package we use in our Modal.  That div has no class name or ID, so instead we're uniquely
+  // identifying it by based on a unique attribute it has which its siblings don't share.
+  > div[data-focus-lock-disabled=false] {
+    height: 100%;
+  }
+
+  // Along with setting the height of modal-content's parent div from react-focus-on, we need to
+  // set modal-content's height as well to get the modal to expand to full-screen height.
+  .modal-content {
+    height: 100%;
+  }
+}
+
 // Import component-specific sass files
@import 'courseware/course/celebration/CelebrationModal.scss';
@import 'courseware/course/content-tools/calculator/calculator.scss';