From dc266a613e2280555854fc6cf554be211f2c9962 Mon Sep 17 00:00:00 2001
From: Blue <ahtesham-quraish@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:12:43 +0500
Subject: [PATCH] fix: replace username with name in base component and on
 welcome page (#1161)

* fix: replace username with fullName in base component and on welcome page
Description: Replace username with name in welcome page component
VAN-1824
---
 .../welcome-page-layout/LargeLayout.jsx       |  6 +++---
 .../welcome-page-layout/MediumLayout.jsx      |  6 +++---
 .../welcome-page-layout/SmallLayout.jsx       |  6 +++---
 .../welcome-page-layout/messages.js           |  2 +-
 src/base-container/index.jsx                  | 20 +++++++++----------
 .../ProgressiveProfiling.jsx                  |  3 ++-
 6 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/base-container/components/welcome-page-layout/LargeLayout.jsx b/src/base-container/components/welcome-page-layout/LargeLayout.jsx
index fd52c055..506de944 100644
--- a/src/base-container/components/welcome-page-layout/LargeLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/LargeLayout.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const LargeLayout = ({ username }) => {
+const LargeLayout = ({ fullName }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -20,7 +20,7 @@ const LargeLayout = ({ username }) => {
           <div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
           <div>
             <h1 className="welcome-to-platform data-hj-suppress">
-              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
             </h1>
             <h2 className="complete-your-profile">
               {formatMessage(messages['complete.your.profile.1'])}
@@ -43,7 +43,7 @@ const LargeLayout = ({ username }) => {
 };
 
 LargeLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+  fullName: PropTypes.string.isRequired,
 };
 
 export default LargeLayout;
diff --git a/src/base-container/components/welcome-page-layout/MediumLayout.jsx b/src/base-container/components/welcome-page-layout/MediumLayout.jsx
index 16b33ffc..7de8ce35 100644
--- a/src/base-container/components/welcome-page-layout/MediumLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/MediumLayout.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const MediumLayout = ({ username }) => {
+const MediumLayout = ({ fullName }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -22,7 +22,7 @@ const MediumLayout = ({ username }) => {
             <div className="medium-yellow-line mt-5 mr-n2" />
             <div>
               <h1 className="h3 data-hj-suppress mw-320">
-                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
               </h1>
               <h2 className="display-1">
                 {formatMessage(messages['complete.your.profile.1'])}
@@ -46,7 +46,7 @@ const MediumLayout = ({ username }) => {
 };
 
 MediumLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+  fullName: PropTypes.string.isRequired,
 };
 
 export default MediumLayout;
diff --git a/src/base-container/components/welcome-page-layout/SmallLayout.jsx b/src/base-container/components/welcome-page-layout/SmallLayout.jsx
index f1d9f76f..c1a21d3e 100644
--- a/src/base-container/components/welcome-page-layout/SmallLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/SmallLayout.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const SmallLayout = ({ username }) => {
+const SmallLayout = ({ fullName }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -20,7 +20,7 @@ const SmallLayout = ({ username }) => {
         <div className="small-yellow-line mt-4.5" />
         <div>
           <h1 className="h5 data-hj-suppress">
-            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
           </h1>
           <h2 className="h1">
             {formatMessage(messages['complete.your.profile.1'])}
@@ -35,7 +35,7 @@ const SmallLayout = ({ username }) => {
 };
 
 SmallLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+  fullName: PropTypes.string.isRequired,
 };
 
 export default SmallLayout;
diff --git a/src/base-container/components/welcome-page-layout/messages.js b/src/base-container/components/welcome-page-layout/messages.js
index 37c75f4b..de36eb17 100644
--- a/src/base-container/components/welcome-page-layout/messages.js
+++ b/src/base-container/components/welcome-page-layout/messages.js
@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   'welcome.to.platform': {
     id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {username}!',
+    defaultMessage: 'Welcome to {siteName}, {fullName}!',
     description: 'Welcome message that appears on progressive profile page',
   },
   'complete.your.profile.1': {
diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx
index cb5ee084..72c6b9c5 100644
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -13,7 +13,7 @@ import {
 import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
 import { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants';
 
-const BaseContainer = ({ children, showWelcomeBanner, username }) => {
+const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
   const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT);
   const enableImageLayout = getConfig().ENABLE_IMAGE_LAYOUT;
 
@@ -36,16 +36,16 @@ const BaseContainer = ({ children, showWelcomeBanner, username }) => {
     return (
       <div className="layout">
         <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageExtraSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <ImageMediumLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <ImageLargeLayout />}
         </MediaQuery>
         <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
           {children}
@@ -59,13 +59,13 @@ const BaseContainer = ({ children, showWelcomeBanner, username }) => {
       <div className="col-md-12 extra-large-screen-top-stripe" />
       <div className="layout">
         <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <DefaultSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <DefaultMediumLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <DefaultLargeLayout />}
         </MediaQuery>
         <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
           {children}
@@ -77,13 +77,13 @@ const BaseContainer = ({ children, showWelcomeBanner, username }) => {
 
 BaseContainer.defaultProps = {
   showWelcomeBanner: false,
-  username: null,
+  fullName: null,
 };
 
 BaseContainer.propTypes = {
   children: PropTypes.node.isRequired,
   showWelcomeBanner: PropTypes.bool,
-  username: PropTypes.string,
+  fullName: PropTypes.string,
 };
 
 export default BaseContainer;
diff --git a/src/progressive-profiling/ProgressiveProfiling.jsx b/src/progressive-profiling/ProgressiveProfiling.jsx
index 878f12fe..9c9e1f9d 100644
--- a/src/progressive-profiling/ProgressiveProfiling.jsx
+++ b/src/progressive-profiling/ProgressiveProfiling.jsx
@@ -196,7 +196,7 @@ const ProgressiveProfiling = (props) => {
   });
 
   return (
-    <BaseContainer showWelcomeBanner username={authenticatedUser?.username}>
+    <BaseContainer showWelcomeBanner fullName={authenticatedUser?.fullName || authenticatedUser?.username}>
       <Helmet>
         <title>{formatMessage(messages['progressive.profiling.page.title'],
           { siteName: getConfig().SITE_NAME })}
@@ -285,6 +285,7 @@ ProgressiveProfiling.propTypes = {
   authenticatedUser: PropTypes.shape({
     username: PropTypes.string,
     userId: PropTypes.number,
+    fullName: PropTypes.string,
   }),
   showError: PropTypes.bool,
   shouldRedirect: PropTypes.bool,