locker-factory
Version:
Content Locker UI Builder
220 lines (198 loc) • 6.86 kB
JavaScript
var React = require( 'react' ),
Constants = require( './constants/Constants' );
var GridItem = React.createClass( {
propTypes: {
campaign: React.PropTypes.object.isRequired,
locker: React.PropTypes.object.isRequired,
clickCallback: React.PropTypes.func,
index: React.PropTypes.number.isRequired
},
_handleClick: function( e ) {
e.preventDefault();
if( this.props.clickCallback ) {
this.props.clickCallback( this.props.campaign.id );
}
},
render: function() {
var locker = this.props.locker,
style = locker.style,
campaign = this.props.campaign,
rewards = ( locker.type == Constants.type.OFFER_WALL ? true : false );
var thumb = ( !style.itemStyle.thumbnailHidden ?
(!style.buttonStyle.buttonsEnabled ?
<div key = "thumb" className = "thumb" >
<img src = { campaign.thumb } style = { { width: '100%', height: 'auto' } } />
</div> :
<div key = "thumb" className = "thumb clickable" onClick={this._handleClick}>
<img src = { campaign.thumb } style = { { width: '100%', height: 'auto' } } />
</div>
) : undefined );
var cName = ( campaign.appName ? campaign.appName : ( campaign.name ? campaign.name : campaign.internalName ) ),
name = <div className = "name" key = "name" >
<p>{ cName }</p>
</div>;
// don't show a description if it's the same as the name
var description = ( !style.itemStyle.descriptionHidden && campaign.description && campaign.description != cName ?
<div key = "description" className = "description" >
<p>{ campaign.description }</p>
</div> : undefined );
var reward,
contentInnards = [];
if( rewards ) {
var rewardRule;
try{
rewardRule = JSON.parse( locker.rewardRule );
} catch( e ) {
if( !locker.rewardRule ) {
rewardRule = {};
} else {
rewardRule = locker.rewardRule;
}
}
var amount = rewardRule.amount;
switch( rewardRule.rewardsType ) {
case Constants.rewardsType.CONDITIONAL:
var evalStr = campaign.rate + rewardRule.condition + rewardRule.expressionValue;
if( !eval( evalStr ) ) {
amount = rewardType.secondaryAmount;
}
break;
case Constants.rewardsType.RATIO:
amount = Math.floor( campaign.rate / rewardRule.ratioPayout ) * rewardRule.amount;
if( isNaN( amount ) ) {
amount = 0;
}
break;
default:
// do nothing
}
// set iconUrl and units
var rewardGuts = [],
iconUrl = rewardRule.iconUrl,
units = rewardRule.units;
// check if this is a fixed campaign with a reward rule of its own
if( locker.fixedCampaigns.length && locker.fixedCampaigns[ this.props.index ] ) {
var staticCampRule;
try {
staticCampRule = JSON.parse( locker.fixedCampaigns[ this.props.index ].rewardRule );
} catch( e ) {
staticCampRule = locker.fixedCampaigns[ this.props.index ].rewardRule;
}
if( staticCampRule.amount ) {
amount = staticCampRule.amount;
}
if( staticCampRule.iconUrl ) {
iconUrl = staticCampRule.iconUrl;
}
if( staticCampRule.units ) {
units = staticCampRule.units;
}
}
// if we have an icon url, display that instead of the name
if( iconUrl ) {
rewardGuts.push( <p key = "amount" className = "amount" >{ amount }</p> );
rewardGuts.push( <div key = "icon" className = "reward-icon" >
<img src = { iconUrl } />
</div> );
} else {
rewardGuts.push( <p key = "amount" className = "amount" >{ amount } { units }</p> );
}
reward = <div key = "reward" className = "reward" >
{ rewardGuts }
</div>;
if( rewardRule.rewardPosition == 'top' ) {
contentInnards.push( reward, name, description );
} else {
contentInnards.push( name, description, reward );
}
} else {
contentInnards.push( name, description );
}
var content = <div key = "contentWrap" className = "contentWrap" >
{ contentInnards }
</div>;
var epc = Number( campaign.epc );
var badge;
if( style.itemStyle.badgeEnabled ) {
var str = style.itemStyle.badgeText;
if( str.indexOf( ';,' ) != -1 ) {
var strs = str.split( ';,' );
str = strs[ Math.floor( Math.random() * strs.length ) ];
}
badge = <span className = "badge" key = "badge" >{ str }</span>;
}
var stars = 0,
starMarkup;
if( style.itemStyle.starsEnabled ) {
if( epc >= 0.08 ) {
stars = 5;
} else if( epc >= 0.06 ) {
stars = 4;
} else if( epc >= 0.04 ) {
stars = 3;
} else if( epc >= 0.02 ) {
stars = 2;
} else if( epc >= 0.01 ) {
stars = 1;
}
if( stars > 0 ) {
var starList = [];
for( var i = 0; i < stars; i++ ) {
var key = 'star-' + i;
starList.push( <span key = { key } className = "fa fa-lg fa-star star"></span> );
}
starMarkup = <span key = "stars" className = "stars">{ starList }</span>;
}
}
var guts = [],
button,
item;
if( badge && Number( campaign.epc ) >= 0.1 ) {
guts.push( badge );
}
if( style.buttonStyle.buttonsEnabled ) {
button = <div key = "button" className = "buttonWrap" >
<button
className = "button"
onClick = { this._handleClick }
dangerouslySetInnerHTML = { { __html: style.buttonStyle.buttonText } }
/>
</div>;
switch( style.buttonStyle.buttonPosition ) {
case Constants.position.TOP_LEFT:
case Constants.position.TOP:
case Constants.position.TOP_RIGHT:
guts.push( button, thumb, content );
break;
case Constants.position.LEFT:
guts.push( button, <div key = "buttonAdjacent" className = "buttonAdjacent" > { thumb } { content } </div> );
break;
case Constants.position.RIGHT:
case Constants.position.BOTTOM_LEFT:
case Constants.position.BOTTOM:
case Constants.position.BOTTOM_RIGHT:
default:
guts.push( thumb, content, button );
break;
}
if( starMarkup ) {
guts.push( starMarkup );
}
item = <div className = "item use-button" key = "item" >
{ guts }
</div>;
} else {
guts.push( thumb, content );
guts.push( starMarkup );
item = <div onClick = { this._handleClick } className = "item" key = "item" >
{ guts }
</div>;
}
var gridKey = "gridItem" + this.props.index;
return( <div className = "gridItem" key = { gridKey } >
{ item }
<span className = "clearfix" />
</div> );
}
} );
module.exports = GridItem;