refactor: moved hardcoded support urls to constants (#1260)

Co-authored-by: Ayesha Waris <ayesha.waris@192.168.1.31>

.env

@@ -15,7 +15,7 @@ LOGO_WHITE_URL=''
 SHOW_EMAIL_CHANNEL=''
 LOGOUT_URL=''
 MARKETING_SITE_BASE_URL=''
-NODE_ENV='production'
+NODE_ENV=''
 ORDER_HISTORY_URL=''
 PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
@@ -31,6 +31,10 @@ MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK=''
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT=''
+ACCOUNT_BASICS_SUPPORT_URL=''
+EMAIL_CONFIRMATION_SUPPORT_URL=''
+CERTIFICATES_SUPPORT_URL=''
+LEARNER_SUPPORT_URL=''
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
 COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'

.env.development

@@ -33,5 +33,9 @@ APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK='mailto:support@example.com'
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT=''
+ACCOUNT_BASICS_SUPPORT_URL=''
+EMAIL_CONFIRMATION_SUPPORT_URL=''
+CERTIFICATES_SUPPORT_URL=''
+LEARNER_SUPPORT_URL=''
 COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'

package.json

@@ -29,16 +29,17 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-footer": "^14.3.0",
     "@edx/frontend-component-header": "^6.2.0",
     "@edx/frontend-platform": "^8.3.3",
-    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/frontend-slot-footer": "^1.1.0",
     "@openedx/paragon": "^22.16.0",
     "@tensorflow-models/blazeface": "0.1.0",
     "@tensorflow/tfjs-converter": "4.22.0",
@@ -60,7 +61,7 @@
     "lodash.pick": "4.4.0",
     "lodash.pickby": "4.6.0",
     "lodash.snakecase": "4.1.1",
-    "long": "5.3.2",
+    "long": "5.3.1",
     "memoize-one": "^6.0.0",
     "prop-types": "15.8.1",
     "qs": "6.14.0",

src/account-settings/delete-account/DeleteAccount.jsx

@@ -59,7 +59,7 @@ export class DeleteAccount extends React.Component {
       hasLinkedTPA, isVerifiedAccount, status, errorType, intl,
     } = this.props;
     const canDelete = isVerifiedAccount && !hasLinkedTPA;
-    const supportArticleUrl = process.env.SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT;
+    const supportArticleUrl = getConfig().SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT;
 
     // TODO: We lack a good way of providing custom language for a particular site.  This is a hack
     // to allow edx.org to fulfill its business requirements.
@@ -102,7 +102,7 @@ export class DeleteAccount extends React.Component {
                 )}
               </p>
               <p>
-                <Hyperlink destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics">
+                <Hyperlink destination={getConfig().ACCOUNT_BASICS_SUPPORT_URL}>
                   {intl.formatMessage(messages['account.settings.delete.account.text.change.instead'])}
                 </Hyperlink>
               </p>
@@ -118,7 +118,7 @@ export class DeleteAccount extends React.Component {
               {isVerifiedAccount ? null : (
                 <BeforeProceedingBanner
                   instructionMessageId={optInInstructionMessageId}
-                  supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
+                  supportArticleUrl={getConfig().EMAIL_CONFIRMATION_SUPPORT_URL}
                 />
               )}
               {hasLinkedTPA ? (

src/account-settings/delete-account/PrintingInstructions.jsx

@@ -11,7 +11,7 @@ const PrintingInstructions = (props) => {
       // TODO: What would a generic version of this link look like?  Should
       // CERTIFICATE_SHARING_HELP_URL really be a configuration variable?  In the meantime,
       // We've removed the link from the default message.
-      destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UVVOA2/certificates"
+      destination={getConfig().CERTIFICATES_SUPPORT_URL}
     >
       {props.intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
     </Hyperlink>

src/account-settings/delete-account/__snapshots__/DeleteAccount.test.jsx.snap

@@ -27,7 +27,6 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
   <p>
     <a
       className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
       target="_self"
     >
       Want to change your email, name, or password instead?
@@ -73,7 +72,6 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
   <p>
     <a
       className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
       target="_self"
     >
       Want to change your email, name, or password instead?
@@ -112,15 +110,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
       </svg>
     </div>
     <div>
-      Before proceeding, please 
-      <a
-        className="pgn__hyperlink default-link standalone-link"
-        href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
-        target="_self"
-      >
-        activate your account
-      </a>
-      .
+      Before proceeding, please activate your account.
     </div>
   </div>
 </div>
@@ -153,7 +143,6 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
   <p>
     <a
       className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
       target="_self"
     >
       Want to change your email, name, or password instead?
@@ -192,15 +181,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
       </svg>
     </div>
     <div>
-      Before proceeding, please 
-      <a
-        className="pgn__hyperlink default-link standalone-link"
-        href="https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account"
-        target="_self"
-      >
-        unlink all social media accounts
-      </a>
-      .
+      Before proceeding, please unlink all social media accounts.
     </div>
   </div>
 </div>

src/id-verification/panels/SummaryPanel.jsx

@@ -130,7 +130,7 @@ const SummaryPanel = (props) => {
         `}
         values={{
           support_link: (
-            <Alert.Link href="https://support.edx.org/hc/en-us">
+            <Alert.Link href={getConfig().LEARNER_SUPPORT_URL}>
               {props.intl.formatMessage(
                 messages['id.verification.review.error'],
                 { siteName: getConfig().SITE_NAME },

src/id-verification/tests/IdVerificationPage.test.jsx

@@ -7,7 +7,7 @@ import {
   render, act, screen, fireEvent,
 } from '@testing-library/react';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
-import IdVerificationPageSlot from '../../plugin-slots/IdVerificationPageSlot';
+import IdVerificationPage from '../IdVerificationPage';
 import * as selectors from '../data/selectors';
 
 jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
@@ -47,7 +47,7 @@ jest.mock('../panels/SubmittedPanel', () => function SubmittedPanelMock() {
   return <></>;
 });
 
-const IntlIdVerificationPage = injectIntl(IdVerificationPageSlot);
+const IntlIdVerificationPage = injectIntl(IdVerificationPage);
 const mockStore = configureStore();
 
 describe('IdVerificationPage', () => {

src/index.jsx

@@ -12,7 +12,7 @@ import { createRoot } from 'react-dom/client';
 import { Route, Routes, Outlet } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
-import { FooterSlot } from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 
 import configureStore from './data/configureStore';
 import AccountSettingsPage, { NotFoundPage } from './account-settings';
@@ -72,6 +72,11 @@ initialize({
         ENABLE_DOB_UPDATE: (process.env.ENABLE_DOB_UPDATE || false),
         MARKETING_EMAILS_OPT_IN: (process.env.MARKETING_EMAILS_OPT_IN || false),
         PASSWORD_RESET_SUPPORT_LINK: process.env.PASSWORD_RESET_SUPPORT_LINK,
+        SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT: process.env.SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT,
+        ACCOUNT_BASICS_SUPPORT_URL: process.env.ACCOUNT_BASICS_SUPPORT_URL,
+        EMAIL_CONFIRMATION_SUPPORT_URL: process.env.EMAIL_CONFIRMATION_SUPPORT_URL,
+        CERTIFICATES_SUPPORT_URL: process.env.CERTIFICATES_SUPPORT_URL,
+        LEARNER_SUPPORT_URL: process.env.LEARNER_SUPPORT_URL,
         LEARNER_FEEDBACK_URL: process.env.LEARNER_FEEDBACK_URL,
       }, 'App loadConfig override handler');
     },

src/notification-preferences/messages.js

@@ -27,9 +27,8 @@ const messages = defineMessages({
       newQuestionPost {New question posts}
       contentReported {Reported content}
       courseUpdates {Course updates}
-      oraStaffNotifications {New ORA submission for staff grading}
+      oraStaffNotifications {ORA new submissions}
       oraGradeAssigned {Essay assignment grade received}
-      newInstructorAllLearnersPost {New posts from instructors}
       other {{text}}
     }`,
     description: 'Display text for Notification Types',

src/plugin-slots/FooterSlot/README.md

@@ -1,15 +1,12 @@
 # Footer Slot
 
-### Slot ID: `org.openedx.frontend.layout.footer.v1`
-
-### Slot ID Aliases
-* `footer_slot`
+### Slot ID: `footer_slot`
 
 ## Description
 
 This slot is used to replace/modify/hide the footer.
 
-The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/). 
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/tree/master/src/components/footer-slot). 
 
 ## Example
 
@@ -26,7 +23,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    'org.openedx.frontend.layout.footer.v1': {
+    footer_slot: {
       plugins: [
         {
           // Hide the default footer

src/plugin-slots/IdVerificationPageSlot/README.md

@@ -1,9 +1,6 @@
-# ID Verification Page Slot
+# Footer Slot
 
-### Slot ID: `org.openedx.frontend.account.id_verification_page.v1`
-
-### Slot ID Aliases
-* `id_verification_page_plugin`
+### Slot ID: `id_verification_page_plugin`
 
 ## Description
 
@@ -22,13 +19,13 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    'org.openedx.frontend.account.id_verification_page.v1': {
+    id_verification_page_plugin: {
       plugins: [
         {
           // Insert a custom IDV Page
           op: PLUGIN_OPERATIONS.Insert,
           widget: {
-            id: 'custom_id_verification_page',
+            id: 'id_verification_page_plugin',
             type: DIRECT_PLUGIN,
             RenderWidget: () => (
               <div>

src/plugin-slots/IdVerificationPageSlot/index.jsx

@@ -2,10 +2,7 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import IdVerificationPage from '../../id-verification';
 
 const IdVerificationPageSlot = () => (
-  <PluginSlot
-    id="org.openedx.frontend.account.id_verification_page.v1"
-    idAliases={['id_verification_page_plugin']}
-  >
+  <PluginSlot id="id_verification_page_plugin">
     <IdVerificationPage />
   </PluginSlot>
 );

src/plugin-slots/README.md

@@ -1,4 +1,4 @@
 # `frontend-app-account` Plugin Slots
 
-* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
-* [`org.openedx.frontend.account.id_verification_page.v1`](./IdVerificationPageSlot/)
+* [`footer_slot`](./FooterSlot/)
+* [`id_verification_page_plugin`](./IdVerificationPageSlot/)