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,8 +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='[]'
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.development

@@ -33,7 +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='[]'
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.test

@@ -32,4 +32,3 @@ MFE_CONFIG_API_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='[]'
-PARAGON_THEME_URLS={}

package.json

@@ -29,17 +29,18 @@
   ],
   "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.4.0",
-    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/frontend-platform": "^8.3.3",
+    "@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/paragon": "^23.4.5",
+    "@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",
     "@tensorflow/tfjs-core": "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/ConfirmationModal.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import {
   AlertModal,
-  Button, Form, ActionRow,
+  Button, Input, ValidationFormGroup, ActionRow,
 } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -78,7 +78,6 @@ export class ConfirmationModal extends Component {
         isOpen={open}
         title={intl.formatMessage(messages['account.settings.delete.account.modal.header'])}
         onClose={onCancel}
-        isOverflowVisible
         footerNode={(
           <ActionRow>
             <Button variant="link" onClick={onCancel}>Cancel</Button>
@@ -108,26 +107,22 @@ export class ConfirmationModal extends Component {
               <PrintingInstructions />
             </p>
           </Alert>
-          <Form.Group
+          <ValidationFormGroup
             for={passwordFieldId}
-            isInvalid={errorType !== null}
+            invalid={errorType !== null}
+            invalidMessage={intl.formatMessage(invalidMessage)}
           >
-            <Form.Label className="d-block" htmlFor={passwordFieldId}>
+            <label className="d-block" htmlFor={passwordFieldId}>
               {intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])}
-            </Form.Label>
-            <Form.Control
+            </label>
+            <Input
               name="password"
               id={passwordFieldId}
               type="password"
               value={password}
               onChange={onChange}
             />
-            {errorType !== null && (
-              <Form.Control.Feedback type="invalid" feedback-for={passwordFieldId}>
-                {intl.formatMessage(invalidMessage)}
-              </Form.Control.Feedback>
-            )}
-          </Form.Group>
+          </ValidationFormGroup>
         </div>
 
       </AlertModal>

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__/ConfirmationModal.test.jsx.snap

@@ -41,7 +41,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
       />
       <div
         aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
         role="dialog"
       >
         <div
@@ -131,57 +131,30 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                 </div>
               </div>
               <div
-                className="pgn__form-group"
-                for="passwordFieldId"
+                className="form-group"
+                data-testid="validation-form-group"
               >
                 <label
-                  className="pgn__form-label d-block"
-                  htmlFor="form-field3"
+                  className="d-block"
+                  htmlFor="passwordFieldId"
                 >
                   If you still wish to continue and delete your account, please enter your account password:
                 </label>
-                <div
-                  className="pgn__form-control-decorator-group"
+                <input
+                  aria-describedby="passwordFieldId-invalid-feedback"
+                  className="form-control is-invalid"
+                  id="passwordFieldId"
+                  name="password"
+                  onChange={[MockFunction]}
+                  type="password"
+                  value="fluffy bunnies"
+                />
+                <strong
+                  className="invalid-feedback"
+                  id="passwordFieldId-invalid-feedback"
                 >
-                  <input
-                    aria-describedby="form-field3-5"
-                    className="has-value form-control is-invalid"
-                    id="form-field3"
-                    name="password"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    type="password"
-                    value="fluffy bunnies"
-                  />
-                </div>
-                <div
-                  className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
-                  feedback-for="passwordFieldId"
-                  id="form-field3-5"
-                >
-                  <span
-                    className="pgn__icon"
-                  >
-                    <svg
-                      aria-hidden={true}
-                      fill="none"
-                      focusable={false}
-                      height={24}
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width={24}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                  <div>
-                    A password is required
-                  </div>
-                </div>
+                  A password is required
+                </strong>
               </div>
             </div>
           </div>
@@ -269,7 +242,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
       />
       <div
         aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
         role="dialog"
       >
         <div
@@ -326,28 +299,30 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
                 </div>
               </div>
               <div
-                className="pgn__form-group"
-                for="passwordFieldId"
+                className="form-group"
+                data-testid="validation-form-group"
               >
                 <label
-                  className="pgn__form-label d-block"
-                  htmlFor="form-field1"
+                  className="d-block"
+                  htmlFor="passwordFieldId"
                 >
                   If you still wish to continue and delete your account, please enter your account password:
                 </label>
-                <div
-                  className="pgn__form-control-decorator-group"
+                <input
+                  aria-describedby=""
+                  className="form-control"
+                  id="passwordFieldId"
+                  name="password"
+                  onChange={[MockFunction]}
+                  type="password"
+                  value="fluffy bunnies"
+                />
+                <strong
+                  className="invalid-feedback"
+                  id="passwordFieldId-invalid-feedback"
                 >
-                  <input
-                    className="has-value form-control"
-                    id="form-field1"
-                    name="password"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    type="password"
-                    value="fluffy bunnies"
-                  />
-                </div>
+                  Unable to delete account
+                </strong>
               </div>
             </div>
           </div>

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/index.scss

@@ -1,8 +1,10 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
-
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 
@@ -118,7 +120,7 @@ $fa-font-path: "~font-awesome/fonts";
   .dropdown-item:active,
   .dropdown-item:focus,
   .btn-tertiary:not(:disabled):not(.disabled).active {
-    background-color: var(--pgn-color-light-300) !important;
+    background-color: $light-300 !important;
   }
 
 
@@ -136,7 +138,7 @@ $fa-font-path: "~font-awesome/fonts";
       font-size: 14px !important;
       padding-top: 10px !important;
       padding-bottom: 10px !important;
-      border: 1px solid var(--pgn-color-light-500) !important;
+      border: 1px solid $light-500 !important;
     }
 
     .dropdown-item {

src/notification-preferences/messages.js

@@ -27,7 +27,7 @@ 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}
       other {{text}}
     }`,

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/)