import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, intlShape } from 'react-intl'; import { FeatureItem } from './FeatureItem'; import { PLANS } from '../../config'; const messages = defineMessages({ availableRecipes: { id: 'pricing.features.recipes', defaultMessage: '!!!Choose from more than 70 Services', }, accountSync: { id: 'pricing.features.accountSync', defaultMessage: '!!!Account Synchronisation', }, desktopNotifications: { id: 'pricing.features.desktopNotifications', defaultMessage: '!!!Desktop Notifications', }, unlimitedServices: { id: 'pricing.features.unlimitedServices', defaultMessage: '!!!Add unlimited services', }, upToThreeServices: { id: 'pricing.features.upToThreeServices', defaultMessage: '!!!Add up to 3 services', }, upToSixServices: { id: 'pricing.features.upToSixServices', defaultMessage: '!!!Add up to 6 services', }, spellchecker: { id: 'pricing.features.spellchecker', defaultMessage: '!!!Spellchecker support', }, workspaces: { id: 'pricing.features.workspaces', defaultMessage: '!!!Workspaces', }, customWebsites: { id: 'pricing.features.customWebsites', defaultMessage: '!!!Add Custom Websites', }, onPremise: { id: 'pricing.features.onPremise', defaultMessage: '!!!On-premise & other Hosted Services', }, thirdPartyServices: { id: 'pricing.features.thirdPartyServices', defaultMessage: '!!!Install 3rd party services', }, serviceProxies: { id: 'pricing.features.serviceProxies', defaultMessage: '!!!Service Proxies', }, teamManagement: { id: 'pricing.features.teamManagement', defaultMessage: '!!!Team Management', }, appDelays: { id: 'pricing.features.appDelays', defaultMessage: '!!!No Waiting Screens', }, adFree: { id: 'pricing.features.adFree', defaultMessage: '!!!Forever ad-free', }, }); export class FeatureList extends Component { static propTypes = { className: PropTypes.string, featureClassName: PropTypes.string, plan: PropTypes.oneOf(PLANS).isRequired, }; static defaultProps = { className: '', featureClassName: '', } static contextTypes = { intl: intlShape, }; render() { const { className, featureClassName, plan, } = this.props; const { intl } = this.context; const features = []; if (plan === PLANS.FREE) { features.push( messages.upToThreeServices, messages.availableRecipes, messages.accountSync, messages.desktopNotifications, ); } else if (plan === PLANS.PERSONAL) { features.push( messages.upToSixServices, messages.spellchecker, messages.appDelays, messages.adFree, ); } else if (plan === PLANS.PRO) { features.push( messages.unlimitedServices, messages.workspaces, messages.customWebsites, // messages.onPremise, messages.thirdPartyServices, // messages.serviceProxies, ); } else { features.push( messages.unlimitedServices, messages.spellchecker, messages.workspaces, messages.customWebsites, messages.onPremise, messages.thirdPartyServices, messages.serviceProxies, messages.teamManagement, messages.appDelays, messages.adFree, ); } return (