Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: replace username with name in base component and on welcome page (#1161)

Browse Source 
* fix: replace username with fullName in base component and on welcome page
Description: Replace username with name in welcome page component
VAN-1824
This commit is contained in:
Blue
2024-02-14 12:12:43 +05:00
committed by GitHub
parent 1b5755664c
commit dc266a613e
6 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/base-container/components/welcome-page-layout/LargeLayout.jsx
View File

@@ -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;

6
src/base-container/components/welcome-page-layout/MediumLayout.jsx
View File

@@ -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;

6
src/base-container/components/welcome-page-layout/SmallLayout.jsx
View File

@@ -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;

2
src/base-container/components/welcome-page-layout/messages.js
View File

@@ -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': {

20
src/base-container/index.jsx
View File

@@ -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;

3
src/progressive-profiling/ProgressiveProfiling.jsx
View File

@@ -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,