From 7c8782e2a1db34efa8b4ae8160c1041d71448432 Mon Sep 17 00:00:00 2001 From: haraldox Date: Fri, 19 Jan 2018 10:05:51 +0100 Subject: change directory structure for subscription move to own sub-folders `subscription` --- src/app.js | 2 +- src/components/auth/Pricing.js | 2 +- .../settings/account/AccountDashboard.js | 2 +- src/components/subscription/SubscriptionForm.js | 220 +++++++++++++++++++++ src/components/subscription/SubscriptionPopup.js | 83 ++++++++ src/components/ui/Subscription.js | 220 --------------------- src/components/ui/SubscriptionPopup.js | 83 -------- .../subscription/SubscriptionFormScreen.js | 115 +++++++++++ .../subscription/SubscriptionPopupScreen.js | 43 ++++ src/containers/ui/SubscriptionFormScreen.js | 115 ----------- src/containers/ui/SubscriptionPopupScreen.js | 43 ---- 11 files changed, 464 insertions(+), 464 deletions(-) create mode 100644 src/components/subscription/SubscriptionForm.js create mode 100644 src/components/subscription/SubscriptionPopup.js delete mode 100644 src/components/ui/Subscription.js delete mode 100644 src/components/ui/SubscriptionPopup.js create mode 100644 src/containers/subscription/SubscriptionFormScreen.js create mode 100644 src/containers/subscription/SubscriptionPopupScreen.js delete mode 100644 src/containers/ui/SubscriptionFormScreen.js delete mode 100644 src/containers/ui/SubscriptionPopupScreen.js diff --git a/src/app.js b/src/app.js index 8e62776d2..97be9f898 100644 --- a/src/app.js +++ b/src/app.js @@ -35,7 +35,7 @@ import ImportScreen from './containers/auth/ImportScreen'; import PricingScreen from './containers/auth/PricingScreen'; import InviteScreen from './containers/auth/InviteScreen'; import AuthLayoutContainer from './containers/auth/AuthLayoutContainer'; -import SubscriptionPopupScreen from './containers/ui/SubscriptionPopupScreen'; +import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen'; // Add Polyfills smoothScroll.polyfill(); diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js index 761561a89..3cc8d5f6b 100644 --- a/src/components/auth/Pricing.js +++ b/src/components/auth/Pricing.js @@ -7,7 +7,7 @@ import { defineMessages, intlShape } from 'react-intl'; // import Button from '../ui/Button'; import Loader from '../ui/Loader'; import Appear from '../ui/effects/Appear'; -import SubscriptionForm from '../../containers/ui/SubscriptionFormScreen'; +import SubscriptionForm from '../../containers/subscription/SubscriptionFormScreen'; const messages = defineMessages({ headline: { diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 43272fe96..4992f0913 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js @@ -9,7 +9,7 @@ import Loader from '../../ui/Loader'; import Button from '../../ui/Button'; import Infobox from '../../ui/Infobox'; import Link from '../../ui/Link'; -import SubscriptionForm from '../../../containers/ui/SubscriptionFormScreen'; +import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; const messages = defineMessages({ headline: { diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js new file mode 100644 index 000000000..dd350479d --- /dev/null +++ b/src/components/subscription/SubscriptionForm.js @@ -0,0 +1,220 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; +import { defineMessages, intlShape } from 'react-intl'; + +import Form from '../../lib/Form'; +import Radio from '../ui/Radio'; +import Button from '../ui/Button'; +import Loader from '../ui/Loader'; + +import { required } from '../../helpers/validation-helpers'; + +const messages = defineMessages({ + submitButtonLabel: { + id: 'subscription.submit.label', + defaultMessage: '!!!Support the development of Franz', + }, + paymentSessionError: { + id: 'subscription.paymentSessionError', + defaultMessage: '!!!Could not initialize payment form', + }, + typeFree: { + id: 'subscription.type.free', + defaultMessage: '!!!free', + }, + typeMonthly: { + id: 'subscription.type.month', + defaultMessage: '!!!month', + }, + typeYearly: { + id: 'subscription.type.year', + defaultMessage: '!!!year', + }, + includedFeatures: { + id: 'subscription.includedFeatures', + defaultMessage: '!!!The Franz Premium Supporter Account includes', + }, + features: { + unlimitedServices: { + id: 'subscription.features.unlimitedServices', + defaultMessage: '!!!Add unlimited services', + }, + onpremise: { + id: 'subscription.features.onpremise', + defaultMessage: '!!!Add on-premise/hosted services like HipChat', + }, + customServices: { + id: 'subscription.features.customServices', + defaultMessage: '!!!Add your custom services', + }, + encryptedSync: { + id: 'subscription.features.encryptedSync', + defaultMessage: '!!!Encrypted session synchronization', + }, + vpn: { + id: 'subscription.features.vpn', + defaultMessage: '!!!Proxy & VPN support', + }, + ads: { + id: 'subscription.features.ads', + defaultMessage: '!!!No ads, ever!', + }, + comingSoon: { + id: 'subscription.features.comingSoon', + defaultMessage: '!!!coming soon', + }, + }, + euTaxInfo: { + id: 'subscription.euTaxInfo', + defaultMessage: '!!!EU residents: local sales tax may apply', + }, +}); + +@observer +export default class SubscriptionForm extends Component { + static propTypes = { + plan: MobxPropTypes.objectOrObservableObject.isRequired, + isLoading: PropTypes.bool.isRequired, + handlePayment: PropTypes.func.isRequired, + retryPlanRequest: PropTypes.func.isRequired, + isCreatingHostedPage: PropTypes.bool.isRequired, + error: PropTypes.bool.isRequired, + showSkipOption: PropTypes.bool, + skipAction: PropTypes.func, + skipButtonLabel: PropTypes.string, + hideInfo: PropTypes.bool.isRequired, + }; + + static defaultProps ={ + content: '', + showSkipOption: false, + skipAction: () => null, + skipButtonLabel: '', + } + + static contextTypes = { + intl: intlShape, + }; + + componentWillMount() { + this.form = this.prepareForm(); + } + + prepareForm() { + const { intl } = this.context; + + const form = { + fields: { + paymentTier: { + value: 'year', + validators: [required], + options: [{ + value: 'month', + label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'month') + ? `${this.props.plan.month.price} / ${intl.formatMessage(messages.typeMonthly)}` + : 'monthly'}`, + }, { + value: 'year', + label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year') + ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}` + : 'yearly'}`, + }], + }, + }, + }; + + if (this.props.showSkipOption) { + form.fields.paymentTier.options.unshift({ + value: 'skip', + label: `€ 0 / ${intl.formatMessage(messages.typeFree)}`, + }); + } + + return new Form(form, this.context.intl); + } + + render() { + const { + isLoading, + isCreatingHostedPage, + handlePayment, + retryPlanRequest, + error, + showSkipOption, + skipAction, + skipButtonLabel, + hideInfo, + } = this.props; + const { intl } = this.context; + + if (error) { + return ( +