Add trial / subscription handling

5 files changed, 126 insertions, 53 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 079d50380..6d10487e8 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -23,10 +23,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineSubscription',
     defaultMessage: '!!!Your Subscription',
   },
-  headlineUpgrade: {
-    id: 'settings.account.headlineTrialUpgrade',
-    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -97,10 +93,8 @@ export default @observer class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingPlans: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
@@ -117,10 +111,8 @@ export default @observer class AccountDashboard extends Component {
     const {
       user,
       isLoading,
-      isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
-      onCloseSubscriptionWindow,
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
@@ -134,7 +126,6 @@ export default @observer class AccountDashboard extends Component {
 
     if (user.team && user.team.plan) {
       planName = i18nPlanName(user.team.plan, intl);
-      console.log(planName);
     }
 
     return (
@@ -221,7 +212,7 @@ export default @observer class AccountDashboard extends Component {
                       )}
                     </div>
                   </div>
-                  {user.isSubscriptionOwner && (
+                  {user.isPremium && user.isSubscriptionOwner && (
                     <div className="account">
                       <div className="account__box">
                         <H2>
@@ -268,7 +259,6 @@ export default @observer class AccountDashboard extends Component {
                   {!user.isPremium && (
                     <div className="account franz-form">
                       <div className="account__box">
-                        <H2>{intl.formatMessage(messages.headlineUpgrade)}</H2>
                         <SubscriptionForm />
                       </div>
                     </div>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 82c517fcb..990ee52e7 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -133,13 +133,13 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
                         </div>
                         <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
                       </div>
-                      <Button
-                        label={intl.formatMessage(messages.manageButton)}
-                        onClick={openTeamManagement}
-                        className={classes.cta}
-                      />
                     </>
                   </PremiumFeatureContainer>
+                  <Button
+                    label={intl.formatMessage(messages.manageButton)}
+                    onClick={openTeamManagement}
+                    className={classes.cta}
+                  />
                 </>
               )}
             </>
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 0c630f047..641368734 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,35 +1,30 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, intlShape, IntlProvider } from 'react-intl';
 import injectSheet from 'react-jss';
 
-import { H3 } from '@meetfranz/ui';
+import { H3, H2 } from '@meetfranz/ui';
 
 import { Button } from '@meetfranz/forms';
 import { FeatureList } from '../ui/FeatureList';
-import { FeatureItem } from '../ui/FeatureItem';
 
 const messages = defineMessages({
   submitButtonLabel: {
-    id: 'subscription.cta.activateTrial',
-    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+    id: 'subscription.cta.choosePlan',
+    defaultMessage: '!!!Choose your plan',
   },
-  includedFeatures: {
-    id: 'subscription.includedProFeatures',
-    defaultMessage: '!!!The Franz Professional Plan includes:',
-  },
-  noStringsAttachedHeadline: {
-    id: 'pricing.trial.terms.headline',
-    defaultMessage: '!!!No strings attached',
+  teaserHeadline: {
+    id: 'settings.account.headlineUpgradeAccount',
+    defaultMessage: '!!!Upgrade your account and get the full Franz experience',
   },
-  noCreditCard: {
-    id: 'pricing.trial.terms.noCreditCard',
-    defaultMessage: '!!!No credit card required',
+  teaserText: {
+    id: 'subscription.teaser.intro',
+    defaultMessage: '!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!',
   },
-  automaticTrialEnd: {
-    id: 'pricing.trial.terms.automaticTrialEnd',
-    defaultMessage: '!!!Your free trial ends automatically after 14 days',
+  includedFeatures: {
+    id: 'subscription.teaser.includedFeatures',
+    defaultMessage: '!!!Paid Franz Plans include:',
   },
 });
 
@@ -37,14 +32,11 @@ const styles = () => ({
   activateTrialButton: {
     margin: [40, 0, 50],
   },
-  keyTerms: {
-    marginTop: 20,
-  },
 });
 
 export default @observer @injectSheet(styles) class SubscriptionForm extends Component {
   static propTypes = {
-    activateTrial: PropTypes.func.isRequired,
+    selectPlan: PropTypes.func.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
   };
@@ -56,28 +48,20 @@ export default @observer @injectSheet(styles) class SubscriptionForm extends Com
   render() {
     const {
       isActivatingTrial,
-      activateTrial,
+      selectPlan,
       classes,
     } = this.props;
     const { intl } = this.context;
 
-    console.log('isActivatingTrial', isActivatingTrial);
-
     return (
       <>
-        <H3 className={classes.keyTerms}>
-          {intl.formatMessage(messages.noStringsAttachedHeadline)}
-        </H3>
-        <ul>
-          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
-          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
-        </ul>
-
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <p>{intl.formatMessage(messages.teaserText)}</p>
         <Button
           label={intl.formatMessage(messages.submitButtonLabel)}
           className={classes.activateTrialButton}
           busy={isActivatingTrial}
-          onClick={activateTrial}
+          onClick={selectPlan}
           stretch
         />
         <div className="subscription__premium-info">
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 0f6f0260f..9404e9c19 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -43,7 +43,7 @@ export default @observer class SubscriptionPopup extends Component {
 
     setTimeout(() => {
       this.props.closeWindow();
-    }, ms('4s'));
+    }, ms('1s'));
   }
 
   render() {
@@ -61,8 +61,8 @@ export default @observer class SubscriptionPopup extends Component {
             autosize
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
-            // onNewWindow={(event, url, frameName, options) =>
-            //   openWindow({ event, url, frameName, options })}
+            // webpreferences="allowpopups"
+            // onNewWindow={(event, url, frameName, options) => console.log(event, url)}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
new file mode 100644
index 000000000..9c512b5f2
--- /dev/null
+++ b/src/components/subscription/TrialForm.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import { H3, H2 } from '@meetfranz/ui';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
+import { FeatureItem } from '../ui/FeatureItem';
+
+const messages = defineMessages({
+  submitButtonLabel: {
+    id: 'subscription.cta.activateTrial',
+    defaultMessage: '!!!Yes, start the free Franz Professional trial',
+  },
+  teaserHeadline: {
+    id: 'settings.account.headlineTrialUpgrade',
+    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
+  },
+  includedFeatures: {
+    id: 'subscription.includedProFeatures',
+    defaultMessage: '!!!The Franz Professional Plan includes:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
+  },
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
+  },
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 50],
+  },
+  keyTerms: {
+    marginTop: 20,
+  },
+});
+
+export default @observer @injectSheet(styles) class TrialForm extends Component {
+  static propTypes = {
+    activateTrial: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      isActivatingTrial,
+      activateTrial,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    console.log('isActivatingTrial', isActivatingTrial);
+
+    return (
+      <>
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <H3 className={classes.keyTerms}>
+          {intl.formatMessage(messages.noStringsAttachedHeadline)}
+        </H3>
+        <ul>
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+        </ul>
+
+        <Button
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={activateTrial}
+          stretch
+        />
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
+          </div>
+        </div>
+      </>
+    );
+  }
+}