diff --git a/.env.development b/.env.development index 1218a3a3..065d345f 100644 --- a/.env.development +++ b/.env.development @@ -29,6 +29,11 @@ TOS_AND_HONOR_CODE='http://localhost:18000/honor' TOS_LINK='http://localhost:18000/tos' PRIVACY_POLICY='http://localhost:18000/privacy' AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK='http://localhost:1999/welcome' +# ***** Base Container Images ***** +BANNER_IMAGE_LARGE='' +BANNER_IMAGE_MEDIUM='' +BANNER_IMAGE_SMALL='' +BANNER_IMAGE_EXTRA_SMALL='' # ***** Miscellaneous ***** APP_ID='' MFE_CONFIG_API_URL='' diff --git a/src/base-container/components/default-layout/index.jsx b/src/base-container/components/default-layout/index.jsx new file mode 100644 index 00000000..6fdef5e7 --- /dev/null +++ b/src/base-container/components/default-layout/index.jsx @@ -0,0 +1,3 @@ +export { default as DefaultLargeLayout } from './LargeLayout'; +export { default as DefaultMediumLayout } from './MediumLayout'; +export { default as DefaultSmallLayout } from './SmallLayout'; diff --git a/src/base-container/components/image-layout/ExtraSmallLayout.jsx b/src/base-container/components/image-layout/ExtraSmallLayout.jsx new file mode 100644 index 00000000..1f7fa244 --- /dev/null +++ b/src/base-container/components/image-layout/ExtraSmallLayout.jsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { getConfig } from '@edx/frontend-platform'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Hyperlink, Image } from '@edx/paragon'; + +import messages from './messages'; + +const ExtraSmallLayout = () => { + const { formatMessage } = useIntl(); + + return ( + + + {getConfig().SITE_NAME} + +
+

+ + {formatMessage(messages['your.career.turning.point'])}{' '} + + + {formatMessage(messages['is.here'])} + +

+
+ + ); +}; + +export default ExtraSmallLayout; diff --git a/src/base-container/components/image-layout/LargeLayout.jsx b/src/base-container/components/image-layout/LargeLayout.jsx new file mode 100644 index 00000000..86c6e786 --- /dev/null +++ b/src/base-container/components/image-layout/LargeLayout.jsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import { getConfig } from '@edx/frontend-platform'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Hyperlink, Image } from '@edx/paragon'; + +import './index.scss'; +import messages from './messages'; + +const LargeLayout = () => { + const { formatMessage } = useIntl(); + + return ( +
+ + {getConfig().SITE_NAME} + +
+

+ + {formatMessage(messages['your.career.turning.point'])} + + + {formatMessage(messages['is.here'])} + +

+
+
+ ); +}; + +export default LargeLayout; diff --git a/src/base-container/components/image-layout/MediumLayout.jsx b/src/base-container/components/image-layout/MediumLayout.jsx new file mode 100644 index 00000000..72e56ae2 --- /dev/null +++ b/src/base-container/components/image-layout/MediumLayout.jsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import { getConfig } from '@edx/frontend-platform'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Hyperlink, Image } from '@edx/paragon'; + +import './index.scss'; +import messages from './messages'; + +const MediumLayout = () => { + const { formatMessage } = useIntl(); + + return ( +
+ + {getConfig().SITE_NAME} + +
+

+ + {formatMessage(messages['your.career.turning.point'])}{' '} + + + {formatMessage(messages['is.here'])} + +

+
+
+ ); +}; + +export default MediumLayout; diff --git a/src/base-container/components/image-layout/SmallLayout.jsx b/src/base-container/components/image-layout/SmallLayout.jsx new file mode 100644 index 00000000..1c1235f7 --- /dev/null +++ b/src/base-container/components/image-layout/SmallLayout.jsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { getConfig } from '@edx/frontend-platform'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Hyperlink, Image } from '@edx/paragon'; + +import messages from './messages'; + +const SmallLayout = () => { + const { formatMessage } = useIntl(); + + return ( + + + {getConfig().SITE_NAME} + +
+

+ + {formatMessage(messages['your.career.turning.point'])}{' '} + + + {formatMessage(messages['is.here'])} + +

+
+ + ); +}; + +export default SmallLayout; diff --git a/src/base-container/components/image-layout/index.jsx b/src/base-container/components/image-layout/index.jsx new file mode 100644 index 00000000..d2ad03e7 --- /dev/null +++ b/src/base-container/components/image-layout/index.jsx @@ -0,0 +1,4 @@ +export { default as ImageLargeLayout } from './LargeLayout'; +export { default as ImageMediumLayout } from './MediumLayout'; +export { default as ImageSmallLayout } from './SmallLayout'; +export { default as ImageExtraSmallLayout } from './ExtraSmallLayout'; diff --git a/src/base-container/components/image-layout/index.scss b/src/base-container/components/image-layout/index.scss new file mode 100644 index 00000000..afd4f814 --- /dev/null +++ b/src/base-container/components/image-layout/index.scss @@ -0,0 +1,37 @@ +.company-logo { + width: 71px; + margin-top: 2rem; + margin-left: 1.5rem; +} + +@media (max-width: 576px) { + .company-logo { + width: 44.67px; + margin-top: 1.25rem; + margin-left: 1.5rem; + } +} + +.banner__image { + background-size: cover; + background-repeat: no-repeat; + border:none; +} + +@media (min-width: 464px) and (max-width: 575.98px) { + .banner__heading { + font-size: 60px; + font-weight: 700; + line-height: 60px; + letter-spacing: -1.2px; + } +} + +@media (min-width: 768px) and (max-width: 800px) { + .banner__heading { + font-size: 60px !important; + font-weight: 700 !important; + line-height: 60px !important; + letter-spacing: -2px !important; + } +} diff --git a/src/base-container/components/image-layout/messages.js b/src/base-container/components/image-layout/messages.js new file mode 100644 index 00000000..30deafea --- /dev/null +++ b/src/base-container/components/image-layout/messages.js @@ -0,0 +1,16 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + 'your.career.turning.point': { + id: 'your.career.turning.point', + defaultMessage: 'Your career turning point', + description: 'Part of the heading "Your career turning point is here." shown on Authn MFE', + }, + 'is.here': { + id: 'is.here', + defaultMessage: 'is here.', + description: 'Part of the heading "Your career turning point is here." shown on Authn MFE', + }, +}); + +export default messages; diff --git a/src/base-container/components/welcome-page-layout/AuthLargeLayout.jsx b/src/base-container/components/welcome-page-layout/LargeLayout.jsx similarity index 93% rename from src/base-container/components/welcome-page-layout/AuthLargeLayout.jsx rename to src/base-container/components/welcome-page-layout/LargeLayout.jsx index 7e3c7681..ad9faec4 100644 --- a/src/base-container/components/welcome-page-layout/AuthLargeLayout.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 AuthLargeLayout = ({ username }) => { +const LargeLayout = ({ username }) => { const { formatMessage } = useIntl(); return ( @@ -42,8 +42,8 @@ const AuthLargeLayout = ({ username }) => { ); }; -AuthLargeLayout.propTypes = { +LargeLayout.propTypes = { username: PropTypes.string.isRequired, }; -export default AuthLargeLayout; +export default LargeLayout; diff --git a/src/base-container/components/welcome-page-layout/AuthMediumLayout.jsx b/src/base-container/components/welcome-page-layout/MediumLayout.jsx similarity index 94% rename from src/base-container/components/welcome-page-layout/AuthMediumLayout.jsx rename to src/base-container/components/welcome-page-layout/MediumLayout.jsx index 970624f7..f85a1364 100644 --- a/src/base-container/components/welcome-page-layout/AuthMediumLayout.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 AuthMediumLayout = ({ username }) => { +const MediumLayout = ({ username }) => { const { formatMessage } = useIntl(); return ( @@ -45,8 +45,8 @@ const AuthMediumLayout = ({ username }) => { ); }; -AuthMediumLayout.propTypes = { +MediumLayout.propTypes = { username: PropTypes.string.isRequired, }; -export default AuthMediumLayout; +export default MediumLayout; diff --git a/src/base-container/components/welcome-page-layout/AuthSmallLayout.jsx b/src/base-container/components/welcome-page-layout/SmallLayout.jsx similarity index 92% rename from src/base-container/components/welcome-page-layout/AuthSmallLayout.jsx rename to src/base-container/components/welcome-page-layout/SmallLayout.jsx index 35da5622..06d20c73 100644 --- a/src/base-container/components/welcome-page-layout/AuthSmallLayout.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 AuthSmallLayout = ({ username }) => { +const SmallLayout = ({ username }) => { const { formatMessage } = useIntl(); return ( @@ -34,8 +34,8 @@ const AuthSmallLayout = ({ username }) => { ); }; -AuthSmallLayout.propTypes = { +SmallLayout.propTypes = { username: PropTypes.string.isRequired, }; -export default AuthSmallLayout; +export default SmallLayout; diff --git a/src/base-container/components/welcome-page-layout/index.jsx b/src/base-container/components/welcome-page-layout/index.jsx new file mode 100644 index 00000000..18e5098e --- /dev/null +++ b/src/base-container/components/welcome-page-layout/index.jsx @@ -0,0 +1,3 @@ +export { default as AuthLargeLayout } from './LargeLayout'; +export { default as AuthMediumLayout } from './MediumLayout'; +export { default as AuthSmallLayout } from './SmallLayout'; diff --git a/src/base-container/data/constants.js b/src/base-container/data/constants.js new file mode 100644 index 00000000..fa80e06a --- /dev/null +++ b/src/base-container/data/constants.js @@ -0,0 +1,3 @@ +const DEFAULT_LAYOUT = 'default-layout'; + +export default DEFAULT_LAYOUT; diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx index 1d4b5513..23003ce8 100644 --- a/src/base-container/index.jsx +++ b/src/base-container/index.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; import { breakpoints } from '@edx/paragon'; @@ -6,36 +6,74 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import MediaQuery from 'react-responsive'; -import LargeLayout from './components/default-layout/LargeLayout'; -import MediumLayout from './components/default-layout/MediumLayout'; -import SmallLayout from './components/default-layout/SmallLayout'; -import AuthLargeLayout from './components/welcome-page-layout/AuthLargeLayout'; -import AuthMediumLayout from './components/welcome-page-layout/AuthMediumLayout'; -import AuthSmallLayout from './components/welcome-page-layout/AuthSmallLayout'; +import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './components/default-layout'; +import { + ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout, +} from './components/image-layout'; +import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout'; +import DEFAULT_LAYOUT from './data/constants'; const BaseContainer = ({ children, showWelcomeBanner }) => { const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null; const username = authenticatedUser ? authenticatedUser.username : null; - return ( - <> -
-
- - {authenticatedUser ? : } - - - {authenticatedUser ? : } - - - {authenticatedUser ? : } - + const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT); -
- {children} + useEffect(() => { + const initRebrandExperiment = () => { + if (window.experiments?.rebrandExperiment) { + setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation); + } else { + window.experiments = window.experiments || {}; + window.experiments.rebrandExperiment = {}; + window.experiments.rebrandExperiment.handleLoaded = () => { + setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation); + }; + } + }; + initRebrandExperiment(); + }, []); + + if (baseContainerVersion === DEFAULT_LAYOUT) { + return ( + <> +
+
+ + {authenticatedUser ? : } + + + {authenticatedUser ? : } + + + {authenticatedUser ? : } + +
+ {children} +
+ + ); + } + + return ( +
+ + {authenticatedUser ? : } + + + {authenticatedUser ? : } + + + {authenticatedUser ? : } + + + {authenticatedUser ? : } + +
+ {children}
- +
); }; diff --git a/src/config/index.js b/src/config/index.js index d3d86aba..d7511d51 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -19,6 +19,11 @@ const configuration = { SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null, TOS_AND_HONOR_CODE: process.env.TOS_AND_HONOR_CODE || null, TOS_LINK: process.env.TOS_LINK || null, + // Base container images + BANNER_IMAGE_LARGE: process.env.BANNER_IMAGE_LARGE || '', + BANNER_IMAGE_MEDIUM: process.env.BANNER_IMAGE_MEDIUM || '', + BANNER_IMAGE_SMALL: process.env.BANNER_IMAGE_SMALL || '', + BANNER_IMAGE_EXTRA_SMALL: process.env.BANNER_IMAGE_EXTRA_SMALL || '', // Miscellaneous GENERAL_RECOMMENDATIONS: process.env.GENERAL_RECOMMENDATIONS || '[]', INFO_EMAIL: process.env.INFO_EMAIL || '', diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 25077380..2b6b79ef 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -227,6 +227,13 @@ const RegistrationPage = (props) => { useEffect(() => { if (registrationResult.success) { + // Optimizely registration conversion event + window.optimizely = window.optimizely || []; + window.optimizely.push({ + type: 'event', + eventName: 'authn-registration-conversion', + }); + // This was added to fire social media conversion pixels through Google tag manager. setCookie(getConfig().REGISTER_CONVERSION_COOKIE_NAME, true);