openedx
diff --git a/‎.env‎
Lines changed: 2 additions & 0 deletions b/‎.env‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎.env.development‎
Lines changed: 2 additions & 0 deletions b/‎.env.development‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎.env.test‎
Lines changed: 2 additions & 0 deletions b/‎.env.test‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎package-lock.json‎
Lines changed: 1849 additions & 3916 deletions b/‎package-lock.json‎
Lines changed: 1849 additions & 3916 deletions
diff --git a/‎src/data/reducers.js‎
Lines changed: 7 additions & 2 deletions b/‎src/data/reducers.js‎
Lines changed: 7 additions & 2 deletions
diff --git a/‎src/data/sagas.js‎
Lines changed: 5 additions & 2 deletions b/‎src/data/sagas.js‎
Lines changed: 5 additions & 2 deletions
diff --git a/‎src/index-v2.scss‎
Lines changed: 6 additions & 0 deletions b/‎src/index-v2.scss‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎src/index.jsx‎
Lines changed: 20 additions & 14 deletions b/‎src/index.jsx‎
Lines changed: 20 additions & 14 deletions
diff --git a/‎src/pacts/frontend-app-profile-edx-platform.json‎
Lines changed: 4 additions & 0 deletions b/‎src/pacts/frontend-app-profile-edx-platform.json‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎src/profile-v2/CertificateCard.jsx‎
Lines changed: 146 additions & 0 deletions b/‎src/profile-v2/CertificateCard.jsx‎
Lines changed: 146 additions & 0 deletions
@@ -31,3 +31,5 @@ SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
 # Fallback in local style files
 PARAGON_THEME_URLS={}
+ENABLE_NEW_PROFILE_VIEW=''
+DISABLE_VISIBILITY_EDITING=''
@@ -32,3 +32,5 @@ SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER_PROFILE=''
 # Fallback in local style files
 PARAGON_THEME_URLS={}
+ENABLE_NEW_PROFILE_VIEW=''
+DISABLE_VISIBILITY_EDITING=''
@@ -26,3 +26,5 @@ COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
 PARAGON_THEME_URLS={}
+ENABLE_NEW_PROFILE_VIEW=''
+DISABLE_VISIBILITY_EDITING=''
@@ -1,9 +1,14 @@
 import { combineReducers } from 'redux';
 
-import { reducer as profilePage } from '../profile';
+import { getConfig } from '@edx/frontend-platform';
+
+import { reducer as profilePageReducer } from '../profile';
+import { reducer as newProfilePageReducer } from '../profile-v2';
+
+const isNewProfileEnabled = getConfig().ENABLE_NEW_PROFILE_VIEW;
 
 const createRootReducer = () => combineReducers({
-  profilePage,
+  profilePage: isNewProfileEnabled ? newProfilePageReducer : profilePageReducer,
 });
 
 export default createRootReducer;
@@ -1,9 +1,12 @@
 import { all } from 'redux-saga/effects';
-
+import { getConfig } from '@edx/frontend-platform';
 import { saga as profileSaga } from '../profile';
+import { saga as newProfileSaga } from '../profile-v2';
+
+const isNewProfileEnabled = getConfig().ENABLE_NEW_PROFILE_VIEW;
 
 export default function* rootSaga() {
   yield all([
-    profileSaga(),
+    isNewProfileEnabled ? newProfileSaga() : profileSaga(),
   ]);
 }
@@ -0,0 +1,6 @@
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+
+@import "~@edx/frontend-component-header/dist/index";
+@import "~@edx/frontend-component-footer/dist/footer";
+
+@import './profile-v2/index';
@@ -7,13 +7,14 @@ import {
   initialize,
   mergeConfig,
   subscribe,
+  getConfig,
 } from '@edx/frontend-platform';
 import {
   AppProvider,
   ErrorPage,
 } from '@edx/frontend-platform/react';
 
-import React, { StrictMode } from 'react';
+import React from 'react';
 // eslint-disable-next-line import/no-unresolved
 import { createRoot } from 'react-dom/client';
 
@@ -23,29 +24,33 @@ import { FooterSlot } from '@edx/frontend-component-footer';
 import messages from './i18n';
 import configureStore from './data/configureStore';
 
-import './index.scss';
 import Head from './head/Head';
 
 import AppRoutes from './routes/AppRoutes';
 
 const rootNode = createRoot(document.getElementById('root'));
-subscribe(APP_READY, () => {
+subscribe(APP_READY, async () => {
+  const isNewProfileEnabled = getConfig().ENABLE_NEW_PROFILE_VIEW === 'true';
+  if (isNewProfileEnabled) {
+    await import('./index-v2.scss');
+  } else {
+    await import('./index.scss');
+  }
   rootNode.render(
-    <StrictMode>
-      <AppProvider store={configureStore()}>
-        <Head />
-        <Header />
-        <main id="main">
-          <AppRoutes />
-        </main>
-        <FooterSlot />
-      </AppProvider>
-    </StrictMode>,
+    <AppProvider store={configureStore()}>
+      <Head />
+      <Header />
+      <main id="main">
+        <AppRoutes isNewProfileEnabled={isNewProfileEnabled} />
+      </main>
+      <FooterSlot />
+    </AppProvider>,
+    document.getElementById('root'),
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  rootNode.render(<ErrorPage message={error.message} />);
+  rootNode.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });
 
 initialize({
@@ -56,6 +61,7 @@ initialize({
       mergeConfig({
         COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
         ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
+        ENABLE_NEW_PROFILE_VIEW: process.env.ENABLE_NEW_PROFILE_VIEW || null,
       }, 'App loadConfig override handler');
     },
   },
 
@@ -36,7 +36,11 @@
           "dateJoined": "2017-06-07T00:44:23Z",
           "email": "staff@example.com",
           "isActive": true,
+          "languageProficiencies": [],
+          "levelOfEducation": null,
           "name": "Lemon Seltzer",
+          "profileImage": {},
+          "socialLinks": [],
           "username": "staff",
           "yearOfBirth": 1901
         },
 
@@ -0,0 +1,146 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@openedx/paragon';
+import get from 'lodash.get';
+
+import classNames from 'classnames';
+import professionalCertificateSVG from './assets/professional-certificate.svg';
+import verifiedCertificateSVG from './assets/verified-certificate.svg';
+import messages from './Certificates.messages';
+import { useIsOnMobileScreen } from './data/hooks';
+
+const CertificateCard = ({
+  certificateType,
+  courseDisplayName,
+  courseOrganization,
+  modifiedDate,
+  downloadUrl,
+  courseId,
+  uuid,
+}) => {
+  const intl = useIntl();
+
+  const certificateIllustration = {
+    professional: professionalCertificateSVG,
+    'no-id-professional': professionalCertificateSVG,
+    verified: verifiedCertificateSVG,
+    honor: null,
+    audit: null,
+  }[certificateType] || null;
+
+  const isMobileView = useIsOnMobileScreen();
+
+  return (
+    <div
+      key={`${modifiedDate}-${courseId}`}
+      className="col-auto d-flex align-items-center p-0"
+    >
+      <div className="col certificate p-4 border-light-400 bg-light-200 w-100 h-100">
+        <div
+          className="certificate-type-illustration"
+          style={{ backgroundImage: `url(${certificateIllustration})` }}
+        />
+        <div className={classNames(
+          'd-flex flex-column position-relative p-0',
+          { 'max-width-304px': isMobileView },
+          { 'width-314px': !isMobileView },
+        )}
+        >
+          <div className="w-100 color-black">
+            <p className={classNames([
+              'mb-0 font-weight-normal',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+            >
+              {intl.formatMessage(get(
+                messages,
+                `profile.certificates.types.${certificateType}`,
+                messages['profile.certificates.types.unknown'],
+              ))}
+            </p>
+            <p className={classNames([
+              'm-0 color-black',
+              isMobileView ? 'h5' : 'h4',
+            ])}
+            >
+              {courseDisplayName}
+            </p>
+            <p className={classNames([
+              'mb-0',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+            >
+              <FormattedMessage
+                id="profile.certificate.organization.label"
+                defaultMessage="From"
+              />
+            </p>
+            <h5 className="mb-0 color-black">{courseOrganization}</h5>
+            <p className={classNames([
+              'mb-0',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+            >
+              <FormattedMessage
+                id="profile.certificate.completion.date.label"
+                defaultMessage="Completed on {date}"
+                values={{
+                  date: <FormattedDate value={new Date(modifiedDate)} />,
+                }}
+              />
+            </p>
+          </div>
+          <div className="pt-3">
+            <Hyperlink
+              destination={downloadUrl}
+              target="_blank"
+              showLaunchIcon={false}
+              className={classNames(
+                'btn btn-primary btn-rounded font-weight-normal px-4 py-10px',
+                { 'btn-sm': isMobileView },
+              )}
+            >
+              {intl.formatMessage(messages['profile.certificates.view.certificate'])}
+            </Hyperlink>
+          </div>
+          <p
+            className={classNames([
+              'mb-0 pt-3',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+          >
+            <FormattedMessage
+              id="profile.certificate.uuid"
+              defaultMessage="Credential ID {certificate_uuid}"
+              values={{
+                certificate_uuid: uuid,
+              }}
+            />
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CertificateCard.propTypes = {
+  certificateType: PropTypes.string,
+  courseDisplayName: PropTypes.string,
+  courseOrganization: PropTypes.string,
+  modifiedDate: PropTypes.string,
+  downloadUrl: PropTypes.string,
+  courseId: PropTypes.string.isRequired,
+  uuid: PropTypes.string,
+};
+
+CertificateCard.defaultProps = {
+  certificateType: 'unknown',
+  courseDisplayName: '',
+  courseOrganization: '',
+  modifiedDate: '',
+  downloadUrl: '',
+  uuid: '',
+};
+
+export default CertificateCard;