86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
import { injectIntl, defineMessages } from 'react-intl'
|
|
import classNames from 'classnames/bind'
|
|
import { me } from '../../initial_state';
|
|
import Icon from '../icon'
|
|
import PanelLayout from './panel_layout'
|
|
|
|
const messages = defineMessages({
|
|
pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
|
|
donation: { id: 'promo.donation', defaultMessage: 'Make a Donation' },
|
|
store: { id: 'promo.store', defaultMessage: 'Store - Buy Merch' },
|
|
apps: { id: 'promo.gab_apps', defaultMessage: 'Gab Apps' },
|
|
})
|
|
|
|
const mapStateToProps = state => {
|
|
return {
|
|
isPro: state.getIn(['accounts', me, 'is_pro']),
|
|
};
|
|
};
|
|
|
|
export default
|
|
@injectIntl
|
|
@connect(mapStateToProps)
|
|
class PromoPanel extends PureComponent {
|
|
|
|
static propTypes = {
|
|
isPro: PropTypes.bool,
|
|
intl: PropTypes.object.isRequired,
|
|
}
|
|
|
|
render() {
|
|
const { isPro, intl } = this.props
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
const items = [
|
|
{
|
|
text: intl.formatMessage(messages.pro),
|
|
href: 'https://pro.gab.com',
|
|
icon: 'arrow-up',
|
|
conditions: isPro,
|
|
highlighted: true,
|
|
},
|
|
{
|
|
text: intl.formatMessage(messages.donation),
|
|
href: 'https://shop.dissenter.com/category/donations',
|
|
icon: 'heart',
|
|
},
|
|
{
|
|
text: intl.formatMessage(messages.store),
|
|
href: 'https://shop.dissenter.com',
|
|
icon: 'shopping-cart',
|
|
},
|
|
{
|
|
text: intl.formatMessage(messages.apps),
|
|
href: 'https://apps.gab.com',
|
|
icon: 'th',
|
|
}
|
|
]
|
|
|
|
return (
|
|
<PanelLayout>
|
|
{
|
|
items.map((item, i) => {
|
|
if (item.conditions === false) return null
|
|
|
|
const classes = cx({
|
|
default: true,
|
|
borderColorSubtle: i !== items.length - 1,
|
|
borderBottom1PX: i !== items.length - 1,
|
|
})
|
|
|
|
return (
|
|
<div key={`promo-panel-item-${i}`} className={classes}>
|
|
<a className={[styles.default, styles.text, styles.colorBlack, styles.noUnderline, styles.paddingVertical10PX, styles.alignItemsCenter].join(' ')} href={item.href}>
|
|
<Icon id={item.icon} height='13px' width='13px' className={[styles.flex, styles.marginRight10PX].join(' ')} />
|
|
{item.text}
|
|
</a>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</PanelLayout>
|
|
)
|
|
}
|
|
}
|