diff options
Diffstat (limited to 'src/components/subscription')
-rw-r--r-- | src/components/subscription/SubscriptionForm.js | 46 |
1 files changed, 22 insertions, 24 deletions
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js index 12e8471ff..6b60c2af0 100644 --- a/src/components/subscription/SubscriptionForm.js +++ b/src/components/subscription/SubscriptionForm.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
@@ -158,35 +158,33 @@ export default @observer class SubscriptionForm extends Component { | |||
158 | <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" /> | 158 | <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" /> |
159 | {!hideInfo && ( | 159 | {!hideInfo && ( |
160 | <div className="subscription__premium-info"> | 160 | <div className="subscription__premium-info"> |
161 | <div> | 161 | <p> |
162 | <p> | 162 | <strong>{intl.formatMessage(messages.includedFeatures)}</strong> |
163 | <strong>{intl.formatMessage(messages.includedFeatures)}</strong> | 163 | </p> |
164 | </p> | 164 | <div className="subscription"> |
165 | <div className="subscription"> | 165 | <ul className="subscription__premium-features"> |
166 | <ul className="subscription__premium-features"> | 166 | <li>{intl.formatMessage(messages.features.onpremise)}</li> |
167 | <li>{intl.formatMessage(messages.features.onpremise)}</li> | 167 | <li> |
168 | <li> | 168 | {intl.formatMessage(messages.features.noInterruptions)} |
169 | {intl.formatMessage(messages.features.noInterruptions)} | 169 | </li> |
170 | </li> | 170 | <li> |
171 | <li> | 171 | {intl.formatMessage(messages.features.spellchecker)} |
172 | {intl.formatMessage(messages.features.spellchecker)} | 172 | </li> |
173 | </li> | 173 | <li> |
174 | <li> | 174 | {intl.formatMessage(messages.features.proxy)} |
175 | {intl.formatMessage(messages.features.proxy)} | 175 | </li> |
176 | </li> | 176 | <li> |
177 | <li> | 177 | {intl.formatMessage(messages.features.ads)} |
178 | {intl.formatMessage(messages.features.ads)} | 178 | </li> |
179 | </li> | 179 | </ul> |
180 | </ul> | ||
181 | </div> | ||
182 | </div> | 180 | </div> |
183 | </div> | 181 | </div> |
184 | )} | 182 | )} |
185 | <div> | 183 | <Fragment> |
186 | {error.code === 'no-payment-session' && ( | 184 | {error.code === 'no-payment-session' && ( |
187 | <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p> | 185 | <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p> |
188 | )} | 186 | )} |
189 | </div> | 187 | </Fragment> |
190 | {showSkipOption && this.form.$('paymentTier').value === 'skip' ? ( | 188 | {showSkipOption && this.form.$('paymentTier').value === 'skip' ? ( |
191 | <Button | 189 | <Button |
192 | label={skipButtonLabel} | 190 | label={skipButtonLabel} |