fix: add variation condition (#31042)
2u LOBs cards only shows to users who fall in variation. VAN-1097
This commit is contained in:
Mubbshar Anwar
@@ -3,168 +3,75 @@ import React from 'react';
|
||||
|
||||
class Static2UCallouts extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
show2uLobs: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.props.isEnterpriseUser){
|
||||
window['optimizely'] = window['optimizely'] || [];
|
||||
window['optimizely'].push({
|
||||
type: "page",
|
||||
pageName: "merchandise_2u_lobs"
|
||||
});
|
||||
}
|
||||
const optimizely = window["optimizely"] || [];
|
||||
optimizely.push({
|
||||
"type": "user",
|
||||
"attributes": {
|
||||
"isEnterpriseUser": this.props.isEnterpriseUser.toString(),
|
||||
}
|
||||
});
|
||||
optimizely.push({
|
||||
type: "page",
|
||||
pageName: "van_1097_merchandise_2u_lobs_on_dashboard"
|
||||
});
|
||||
const experimentId = '22164741776';
|
||||
this.timer = setTimeout(() => {
|
||||
const selectedVariant = optimizely.get("state").getVariationMap()[experimentId];
|
||||
if (selectedVariant?.name === 'dashboard_with_2u_lobs'){
|
||||
this.setState({
|
||||
show2uLobs: true,
|
||||
})
|
||||
}
|
||||
}, 500 );
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="static-callouts-main">
|
||||
<div className="static-callouts-header">
|
||||
<div className="static-callouts-heading">
|
||||
<h2 className="static-callouts-heading-black">
|
||||
{gettext('More opportunities for you')}
|
||||
<h2 className="static-callouts-heading-red">{gettext(' to learn')}</h2>
|
||||
</h2>
|
||||
this.state.show2uLobs && (
|
||||
<div className="static-callouts-main">
|
||||
<div className="static-callouts-header">
|
||||
<div className="static-callouts-heading">
|
||||
<h2 className="static-callouts-heading-black">
|
||||
{gettext('More opportunities for you')}
|
||||
<h2 className="static-callouts-heading-red">{gettext(' to learn')}</h2>
|
||||
</h2>
|
||||
</div>
|
||||
<p className="static-callouts-subheading">
|
||||
{gettext('We\'ve added 500+ learning opportunities to create one of the world\'s most '
|
||||
+ 'comprehensive free-to-degree online learning platforms.')}
|
||||
</p>
|
||||
</div>
|
||||
<p className="static-callouts-subheading">
|
||||
{gettext('We\'ve added 500+ learning opportunities to create one of the world\'s most '
|
||||
+ 'comprehensive free-to-degree online learning platforms.')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="static-callouts-cards">
|
||||
<a
|
||||
href={`${this.props.executiveEducationUrl}?vanguards_click=execed`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-card static-callouts-card-no-bootcamp'
|
||||
) : 'static-callouts-card'
|
||||
}
|
||||
>
|
||||
<div className="static-callouts-card-badge">
|
||||
New
|
||||
</div>
|
||||
<h3 className="static-callouts-card-heading">
|
||||
Executive Education
|
||||
</h3>
|
||||
<div className="static-callouts-card-description">
|
||||
Short courses to develop leadership skills
|
||||
<svg
|
||||
width="30"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-cards-divider static-callouts-cards-divider-no-bootcamp'
|
||||
) : 'static-callouts-cards-divider'
|
||||
}
|
||||
>
|
||||
<svg viewBox="2 0 25 95">
|
||||
<path d="M 0 120 l 30 -150" stroke="#EAE6E5" strokeWidth="4" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
href={`${this.props.mastersDegreeUrl}?vanguards_click=masters`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-card static-callouts-card-no-bootcamp'
|
||||
) : 'static-callouts-card'
|
||||
}
|
||||
>
|
||||
<div className="static-callouts-card-badge">
|
||||
New
|
||||
</div>
|
||||
<h3 className="static-callouts-card-heading">
|
||||
Master’s Degrees
|
||||
</h3>
|
||||
<div className="static-callouts-card-description">
|
||||
Online degree programs from top universities
|
||||
<svg
|
||||
width="30"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-cards-divider static-callouts-cards-divider-no-bootcamp'
|
||||
) : 'static-callouts-cards-divider static-callouts-cards-break'
|
||||
}
|
||||
>
|
||||
<svg viewBox="2 0 25 95">
|
||||
<path d="M 0 120 l 30 -150" stroke="#EAE6E5" strokeWidth="4" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
href={`${this.props.bachelorsDegreeUrl}?vanguards_click=bachelors`}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-card static-callouts-card-no-bootcamp'
|
||||
) : 'static-callouts-card'
|
||||
}
|
||||
>
|
||||
<div className="static-callouts-card-badge">
|
||||
New
|
||||
</div>
|
||||
<h3 className="static-callouts-card-heading">
|
||||
Bachelor’s Degrees
|
||||
</h3>
|
||||
<div className="static-callouts-card-description">
|
||||
Begin or complete a degree; fully online
|
||||
<svg
|
||||
width="30"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
{this.props.countryCode === 'US' && (
|
||||
<div className="static-callouts-cards-divider">
|
||||
<svg viewBox="2 0 25 95">
|
||||
<path d="M 0 120 l 30 -150" stroke="#EAE6E5" strokeWidth="4" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{this.props.countryCode === 'US' && (
|
||||
<a href={`${this.props.bootCampsUrl}?vanguards_click=bootcamps`}
|
||||
target="_blank"
|
||||
className="static-callouts-card">
|
||||
<div className="static-callouts-cards">
|
||||
<a
|
||||
href={`${this.props.executiveEducationUrl}?vanguards_click=execed`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-card static-callouts-card-no-bootcamp'
|
||||
) : 'static-callouts-card'
|
||||
}
|
||||
>
|
||||
<div className="static-callouts-card-badge">
|
||||
New
|
||||
</div>
|
||||
<h3 className="static-callouts-card-heading">
|
||||
Boot Camps
|
||||
Executive Education
|
||||
</h3>
|
||||
<div className="static-callouts-card-description">
|
||||
Intensive, hands-on, project-based training
|
||||
Short courses to develop leadership skills
|
||||
<svg
|
||||
width="30"
|
||||
height="20"
|
||||
@@ -179,10 +86,128 @@ class Static2UCallouts extends React.Component {
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-cards-divider static-callouts-cards-divider-no-bootcamp'
|
||||
) : 'static-callouts-cards-divider'
|
||||
}
|
||||
>
|
||||
<svg viewBox="2 0 25 95">
|
||||
<path d="M 0 120 l 30 -150" stroke="#EAE6E5" strokeWidth="4" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
href={`${this.props.mastersDegreeUrl}?vanguards_click=masters`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-card static-callouts-card-no-bootcamp'
|
||||
) : 'static-callouts-card'
|
||||
}
|
||||
>
|
||||
<div className="static-callouts-card-badge">
|
||||
New
|
||||
</div>
|
||||
<h3 className="static-callouts-card-heading">
|
||||
Master’s Degrees
|
||||
</h3>
|
||||
<div className="static-callouts-card-description">
|
||||
Online degree programs from top universities
|
||||
<svg
|
||||
width="30"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-cards-divider static-callouts-cards-divider-no-bootcamp'
|
||||
) : 'static-callouts-cards-divider static-callouts-cards-break'
|
||||
}
|
||||
>
|
||||
<svg viewBox="2 0 25 95">
|
||||
<path d="M 0 120 l 30 -150" stroke="#EAE6E5" strokeWidth="4" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
href={`${this.props.bachelorsDegreeUrl}?vanguards_click=bachelors`}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className={
|
||||
this.props.countryCode !== 'US' ? (
|
||||
'static-callouts-card static-callouts-card-no-bootcamp'
|
||||
) : 'static-callouts-card'
|
||||
}
|
||||
>
|
||||
<div className="static-callouts-card-badge">
|
||||
New
|
||||
</div>
|
||||
<h3 className="static-callouts-card-heading">
|
||||
Bachelor’s Degrees
|
||||
</h3>
|
||||
<div className="static-callouts-card-description">
|
||||
Begin or complete a degree; fully online
|
||||
<svg
|
||||
width="30"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
{this.props.countryCode === 'US' && (
|
||||
<div className="static-callouts-cards-divider">
|
||||
<svg viewBox="2 0 25 95">
|
||||
<path d="M 0 120 l 30 -150" stroke="#EAE6E5" strokeWidth="4" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{this.props.countryCode === 'US' && (
|
||||
<a href={`${this.props.bootCampsUrl}?vanguards_click=bootcamps`}
|
||||
target="_blank"
|
||||
className="static-callouts-card">
|
||||
<div className="static-callouts-card-badge">
|
||||
New
|
||||
</div>
|
||||
<h3 className="static-callouts-card-heading">
|
||||
Boot Camps
|
||||
</h3>
|
||||
<div className="static-callouts-card-description">
|
||||
Intensive, hands-on, project-based training
|
||||
<svg
|
||||
width="30"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user