chore: move iap info out of modal (#383)

* WIP: swiper

* WIP: buttons

* WIP: text

* WIP: caps

* WIP: first screen

* WIP: remove unused

* WIP: details page

* WIP: swiper

* WIP: remove old files

* WIP: new mock upgrade

* WIP: new screen

* fix: add back icon

* WIP: plans

* fix: lint

* WIP: wire buttons

* fix: style

* fix: hide tabs

* fix: remove trial

* fix: open link for manage subscription

* fix: Mc links

* fix: lint

* fix: remove whitespace

app/components/helpers/buttons.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import Text from '../controls/custom-text';
 import { vars } from '../../styles/styles';
-import { tu } from '../utils/translator';
+import { tu, tx } from '../utils/translator';
 import testLabel from '../helpers/test-label';
 
 export default {
@@ -123,6 +123,56 @@ export default {
         );
     },
 
+    roundBlueBgButtonWithSubtitle(
+        text,
+        subtitle,
+        onPress,
+        disabled,
+        accessibilityId,
+        style,
+        containerStyle
+    ) {
+        const touchableStyle = {
+            height: vars.button.touchableHeight,
+            alignItems: 'center',
+            justifyContent: 'center'
+        };
+        const buttonStyle = {
+            minWidth: vars.button.minWidth,
+            height: vars.button.buttonHeight * 1.2,
+            paddingHorizontal: vars.button.paddingHorizontal,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: vars.button.borderRadius,
+            backgroundColor: disabled ? vars.mediumGrayBg : vars.peerioBlue
+        };
+        const textStyle = {
+            textAlign: 'center',
+            color: vars.white,
+            fontSize: vars.font.size14
+        };
+        const subtitleStyle = {
+            textAlign: 'center',
+            color: vars.textWhite50,
+            fontSize: vars.font.size10
+        };
+        return (
+            <TouchableOpacity
+                {...testLabel(accessibilityId)}
+                disabled={disabled}
+                onPress={disabled ? null : onPress}
+                pressRetentionOffset={vars.retentionOffset}
+                style={[touchableStyle, containerStyle]}>
+                <View style={[buttonStyle, style]}>
+                    <Text semibold style={textStyle}>
+                        {tx(text)}
+                    </Text>
+                    <Text style={subtitleStyle}>{tx(subtitle)}</Text>
+                </View>
+            </TouchableOpacity>
+        );
+    },
+
     roundWhiteBgButton(text, onPress, disabled, accessibilityId, style) {
         const touchableStyle = {
             height: vars.button.touchableHeight,
@@ -161,6 +211,50 @@ export default {
         );
     },
 
+    roundWhiteBgButtonWithSubtitle(text, subtitle, onPress, disabled, accessibilityId, style) {
+        const touchableStyle = {
+            height: vars.button.touchableHeight,
+            alignItems: 'center',
+            justifyContent: 'center'
+        };
+        const buttonStyle = {
+            minWidth: vars.button.minWidth,
+            height: vars.button.buttonHeight * 1.2,
+            paddingHorizontal: vars.button.paddingHorizontal,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: vars.button.borderRadius,
+            borderColor: vars.peerioBlue,
+            borderWidth: 1,
+            backgroundColor: disabled ? vars.mediumGrayBg : vars.white
+        };
+        const textStyle = {
+            textAlign: 'center',
+            color: vars.peerioBlue,
+            fontSize: vars.font.size14
+        };
+        const subtitleStyle = {
+            textAlign: 'center',
+            color: vars.black54,
+            fontSize: vars.font.size10
+        };
+        return (
+            <TouchableOpacity
+                {...testLabel(accessibilityId)}
+                disabled={disabled}
+                onPress={disabled ? null : onPress}
+                pressRetentionOffset={vars.retentionOffset}
+                style={touchableStyle}>
+                <View style={[buttonStyle, style]}>
+                    <Text semibold style={textStyle}>
+                        {tx(text)}
+                    </Text>
+                    <Text style={subtitleStyle}>{tx(subtitle)}</Text>
+                </View>
+            </TouchableOpacity>
+        );
+    },
+
     redTextButton(text, onPress, disabled) {
         const buttonStyle = {
             paddingRight: vars.spacing.small.maxi2x,

app/components/mocks/mock-popups.js

@@ -4,9 +4,9 @@ import { observer } from 'mobx-react/native';
 import PopupLayout from '../layout/popup-layout';
 import { vars } from '../../styles/styles';
 // import PaymentsInfoPopup from '../payments/payments-info-popup';
-import AccountUpgradePlan from '../settings/account-upgrade-plan';
+// import AccountUpgradePlan from '../settings/account-upgrade-plan';
 // import { popupControl } from '../shared/popups';
-import plans from '../payments/payments-config';
+// import plans from '../payments/payments-config';
 import { gradient } from '../controls/effects';
 
 const basicColor = '#82A9BE';
@@ -27,7 +27,7 @@ export default class MockChatList extends Component {
                         style: { flexGrow: 1, paddingTop: vars.layoutPaddingTop },
                         backgroundColor: 'transparent'
                     },
-                    <AccountUpgradePlan plan={plans[1]} />,
+                    // <AccountUpgradePlan plan={plans[1]} />,
                     basicColor,
                     premiumColor
                 )}

app/components/mocks/mock-upgrade.js

@@ -1,15 +1,10 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react/native';
-import ModalLayout from '../layout/modal-layout';
-import routerModal from '../routes/router-modal';
+import AccountUpgradeOffer from '../settings/account-upgrade-offer';
 
 @observer
 export default class MockUpgrade extends Component {
-    componentDidMount() {
-        setTimeout(() => routerModal.accountUpgradeSwiper(), 500);
-    }
-
     render() {
-        return <ModalLayout />;
+        return <AccountUpgradeOffer />;
     }
 }

app/components/payments/payments-config.js

@@ -12,19 +12,24 @@ Secure File Storage & Sharing
 
 const professionalIncludesInfo = `Includes all features of Basic plan`;
 
-const professionalPlanInfo = `500 GB of secure storage
+const professionalPlanInfo = `500 GB secure file storage
 Unlimited upload file size
-Premium support
-`;
+Priority support services`;
+
+const professionalPaymentInfoMonthly = monthly => `
+Monthly plans will be charged ${monthly} at the start of your subscription period. These prices may vary according to your location and local currency.
 
-const professionalPaymentInfo = (monthly, annual) => `
-Monthly plans will be charged ${monthly}.
+Your subscription will renew automatically at the end of each billing period unless you disable auto-renew at least 24-hours before the end of your current billing period.
+
+If your subscription is renewed, your account will be charged for renewal within 24-hours prior to the end of the current period.
+`;
 
-Annual plans will be charged ${annual}.
+const professionalPaymentInfoAnnual = annual => `
+Annual plans will be charged ${annual} at the start of your subscription period. These prices may vary according to your location and local currency.
 
-These prices may vary according to your location and local currency.
+Your subscription will renew automatically at the end of each billing period unless you disable auto-renew at least 24-hours before the end of your current billing period.
 
-Your subscription will renew automatically at the end of each billing period unless you disable auto-renew at least 24-hours before the end of your current billing period. If your subscription is renewed, your account will be charged for renewal within 24-hours prior to the end of the current period.
+If your subscription is renewed, your account will be charged for renewal within 24-hours prior to the end of the current period.
 `;
 
 const { professionalYearlyID, professionalMonthlyID } = paymentsNative;
@@ -92,12 +97,13 @@ class ProfessionalPlan extends PaidPlan {
             title: 'title_billedAnnually',
             id: professionalYearlyID,
             serverID: 'icebear_pro_yearly',
-            price: whitelabel.PRO_YEARLY_PRICE || '$119.88 USD/year'
+            price: whitelabel.PRO_YEARLY_PRICE || '$118.99 USD/year'
         }
     ];
     includes = professionalIncludesInfo;
     info = professionalPlanInfo;
-    paymentInfo = professionalPaymentInfo(this.priceOptions[0].price, this.priceOptions[1].price);
+    paymentInfoMonthly = professionalPaymentInfoMonthly(this.priceOptions[0].price);
+    paymentInfoAnnual = professionalPaymentInfoAnnual(this.priceOptions[1].price);
 }
 
 const plans = [new BasicPlan(), new ProfessionalPlan()];

app/components/routes/router-main.js

@@ -21,7 +21,8 @@ import {
     settingsState,
     contactState,
     contactAddState,
-    invitationState
+    invitationState,
+    accountUpgradeState
 } from '../states';
 // import { enablePushNotifications } from '../../lib/push';
 import routes from './routes';
@@ -34,6 +35,8 @@ import preferenceStore from '../settings/preference-store';
 import whiteLabelComponents from '../../components/whitelabel/white-label-components';
 import { timeoutWithAction } from '../utils/timeouts';
 import { transitionAnimation } from '../helpers/animations';
+import AccountUpgradeOffer from '../settings/account-upgrade-offer';
+import { AccountUpgradeMonthly, AccountUpgradeAnnual } from '../settings/account-upgrade-option';
 
 const INACTIVE_DELAY = 5000;
 
@@ -80,6 +83,9 @@ class RouterMain extends Router {
             settingsState
         );
         this.add('channelInvite', [<whiteLabelComponents.ChannelInvite />], invitationState);
+        this.add('accountUpgrade', [<AccountUpgradeOffer />], accountUpgradeState);
+        this.add('accountUpgradeMonthly', [<AccountUpgradeMonthly />], accountUpgradeState);
+        this.add('accountUpgradeAnnual', [<AccountUpgradeAnnual />], accountUpgradeState);
 
         reaction(
             () => fileStore.migration.pending,

app/components/routes/router-modal.js

@@ -11,7 +11,6 @@ import FileChooseRecipient from '../files/file-choose-recipient';
 import ContactView from '../contacts/contact-view';
 import ChatInfo from '../messaging/chat-info';
 import ChannelInfo from '../messaging/channel-info';
-import AccountUpgradeSwiper from '../settings/account-upgrade-swiper';
 import popupState from '../layout/popup-state';
 import routes from './routes';
 import { vars } from '../../styles/styles';
@@ -37,7 +36,6 @@ class RouterModal extends Router {
         this.add('contactView', ContactView);
         this.add('chatInfo', ChatInfo);
         this.add('channelInfo', ChannelInfo);
-        this.add('accountUpgradeSwiper', AccountUpgradeSwiper, true, true);
         this.add('contactSync', SignupContactInvite);
         this.add('messageInfo', MessageInfo);
     }