diff --git a/app/components/helpers/buttons.js b/app/components/helpers/buttons.js index a94680f39..faa1a6cfd 100644 --- a/app/components/helpers/buttons.js +++ b/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 ( + + + + {tx(text)} + + {tx(subtitle)} + + + ); + }, + 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 ( + + + + {tx(text)} + + {tx(subtitle)} + + + ); + }, + redTextButton(text, onPress, disabled) { const buttonStyle = { paddingRight: vars.spacing.small.maxi2x, diff --git a/app/components/mocks/mock-popups.js b/app/components/mocks/mock-popups.js index 3780698d8..526f34a26 100644 --- a/app/components/mocks/mock-popups.js +++ b/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' }, - , + // , basicColor, premiumColor )} diff --git a/app/components/mocks/mock-upgrade.js b/app/components/mocks/mock-upgrade.js index 258f46e36..4935257e8 100644 --- a/app/components/mocks/mock-upgrade.js +++ b/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 ; + return ; } } diff --git a/app/components/payments/payments-config.js b/app/components/payments/payments-config.js index c27bc3a57..5a83c00c6 100644 --- a/app/components/payments/payments-config.js +++ b/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()]; diff --git a/app/components/routes/router-main.js b/app/components/routes/router-main.js index a1e310ba5..e95c4b086 100644 --- a/app/components/routes/router-main.js +++ b/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', [], invitationState); + this.add('accountUpgrade', [], accountUpgradeState); + this.add('accountUpgradeMonthly', [], accountUpgradeState); + this.add('accountUpgradeAnnual', [], accountUpgradeState); reaction( () => fileStore.migration.pending, diff --git a/app/components/routes/router-modal.js b/app/components/routes/router-modal.js index af2dc4778..95ada34f9 100644 --- a/app/components/routes/router-modal.js +++ b/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); } diff --git a/app/components/settings/account-upgrade-navigator.js b/app/components/settings/account-upgrade-navigator.js deleted file mode 100644 index 1f39eca08..000000000 --- a/app/components/settings/account-upgrade-navigator.js +++ /dev/null @@ -1,100 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { View, Dimensions, TouchableOpacity } from 'react-native'; -import { observer } from 'mobx-react/native'; -import Text from '../controls/custom-text'; -import { vars } from '../../styles/styles'; -import icons from '../helpers/icons'; -import plans from '../payments/payments-config'; -import { tx } from '../utils/translator'; - -const { width, height } = Dimensions.get('window'); - -@observer -export default class AccountUpgradeNavigator extends Component { - circle(checked, index) { - const filled = index === this.props.selected; - const w = 40; - const s = { - width: w, - height: w, - borderRadius: w / 2, - borderColor: 'white', - borderWidth: 3, - backgroundColor: filled ? 'white' : 'transparent', - alignItems: 'center', - justifyContent: 'center' - }; - const iconRender = checked && filled ? icons.plaindark : icons.plainWhite; - const inner = checked ? iconRender('check', w / 1.5) : null; - return ( - this.props.onJumpTo(index)} - pressRetentionOffset={vars.retentionOffset} - style={{ alignItems: 'center' }}> - - {inner} - - - ); - } - - get line() { - const s = { - borderBottomWidth: 4, - borderColor: 'white', - flex: 1, - flexGrow: 1, - width: 40, - height: 20 - }; - return ; - } - - plan = index => this.circle(plans[index].isCurrent, index); - - render() { - const navigator = { - position: 'absolute', - bottom: 140, - width, - paddingHorizontal: vars.spacing.medium.maxi2x - }; - const row = { - flex: 1, - flexGrow: 1, - flexDirection: 'row', - justifyContent: 'space-between' - }; - const t = { - color: 'white', - backgroundColor: 'transparent', - marginTop: vars.spacing.small.midi, - width: 40, - textAlign: 'center' - }; - const t1 = [t]; - const t3 = [t]; - - if (height < 500) return null; - - return ( - - - {this.plan(0)} - {this.line} - {this.plan(1)} - - - {tx('title_basicPlan')} - {tx('title_proPlan')} - - - ); - } -} - -AccountUpgradeNavigator.propTypes = { - selected: PropTypes.number, - onJumpTo: PropTypes.any -}; diff --git a/app/components/settings/account-upgrade-offer.js b/app/components/settings/account-upgrade-offer.js new file mode 100644 index 000000000..d667e78e6 --- /dev/null +++ b/app/components/settings/account-upgrade-offer.js @@ -0,0 +1,154 @@ +import React from 'react'; +import { observer } from 'mobx-react/native'; +import { View, ScrollView, Dimensions } from 'react-native'; +import { vars } from '../../styles/styles'; +import routes from '../routes/routes'; +import { User } from '../../lib/icebear'; +import { popupYes } from '../shared/popups'; +import Text from '../controls/custom-text'; +import { tx, t } from '../utils/translator'; +import buttons from '../helpers/buttons'; +import icons from '../helpers/icons'; +import plans from '../payments/payments-config'; +import SafeComponent from '../shared/safe-component'; +import BackIcon from '../layout/back-icon'; +import { uiState } from '../states'; + +const { width } = Dimensions.get('window'); + +const subtitleStyle = { + color: 'white', + alignSelf: 'center', + paddingTop: 50, + paddingBottom: 30 +}; + +const actionStyle = { + color: vars.black54, + alignSelf: 'center', + paddingTop: 100, + paddingBottom: 30, + fontSize: vars.font.size18 +}; + +const featureSmallText = { + color: vars.black54, + fontSize: vars.font.size14, + paddingLeft: 6 +}; + +const buttonContainer = { + marginBottom: vars.spacing.small.maxi2x, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center' +}; + +const contentContainerStyle = { + width, + flexDirection: 'column', + flexGrow: 1, + flex: 1 +}; + +const container = { + flex: 1, + flexGrow: 1, + backgroundColor: vars.darkBlue +}; + +@observer +export default class AccountUpgradeOffer extends SafeComponent { + componentWillMount() { + if (User.current) { + console.log('account-upgrade-swiper: active plans'); + User.current && console.log(User.current.activePlans); + if (User.current.addresses.filter(e => e.confirmed).length === 0) { + popupYes('', '', t('error_upgradingAccountNoConfirmedEmail')).then(() => + routes.main.settings() + ); + } + } + } + + componentDidMount() { + uiState.hideTabs = true; + } + + componentWillUnmount() { + uiState.hideTabs = false; + } + + get leftIcon() { + return ; + } + + featureText(text) { + return ( + + {icons.coloredAsText('check', vars.black54, 16)} + + {text} + + + ); + } + + get footer() { + const { priceOptions } = plans[1]; + return ( + + {buttons.roundBlueBgButtonWithSubtitle( + priceOptions[1].price, + tx(priceOptions[1].title), + () => routes.main.accountUpgradeAnnual(), + null, + null, + { width: vars.roundedButtonWidth, marginRight: 6 } + )} + {buttons.roundWhiteBgButtonWithSubtitle( + priceOptions[0].price, + tx(priceOptions[0].title), + () => routes.main.accountUpgradeMonthly(), + null, + null, + { width: vars.roundedButtonWidth } + )} + + ); + } + + render() { + const { info } = plans[1]; + return ( + + + + {tx('description_peerio_pro')} + + + + {tx('title_upgrade')} + + {info.split('\n').map(this.featureText)} + + {tx('title_get_peerio_pro')} + + {this.footer} + + + + ); + } +} diff --git a/app/components/settings/account-upgrade-option.js b/app/components/settings/account-upgrade-option.js new file mode 100644 index 000000000..9ecbb14ce --- /dev/null +++ b/app/components/settings/account-upgrade-option.js @@ -0,0 +1,122 @@ +import React from 'react'; +import { View, ScrollView, Dimensions } from 'react-native'; +import { observer } from 'mobx-react/native'; +import Text from '../controls/custom-text'; +import { vars } from '../../styles/styles'; +import { tx } from '../utils/translator'; +import buttons from '../helpers/buttons'; +import plans from '../payments/payments-config'; +import SafeComponent from '../shared/safe-component'; +import BackIcon from '../layout/back-icon'; +import routes from '../routes/routes'; +import { uiState } from '../states'; +import payments from '../payments/payments'; + +const { width } = Dimensions.get('window'); + +const subtitleStyle = { + fontSize: vars.font.size14, + color: 'white', + alignSelf: 'center', + paddingTop: 30 +}; + +const subtitleStyle2 = { + fontSize: vars.font.size14, + color: 'white', + alignSelf: 'center', + paddingTop: 0, + paddingBottom: 30 +}; + +const contentContainerStyle = { + width, + flexDirection: 'column', + flexGrow: 1, + flex: 1, + backgroundColor: vars.darkBlue +}; + +@observer +class AccountUpgradeOption extends SafeComponent { + componentDidMount() { + uiState.hideTabs = true; + } + + componentWillUnmount() { + uiState.hideTabs = false; + } + + get leftIcon() { + return ; + } + + render() { + return ( + + + {tx(this.title)} + + + {this.description} + + + + {tx(this.paymentInfo)} + + {buttons.roundBlueBgButton(tx('button_upgrade'), this.action, null, null, { + width: vars.wideRoundedButtonWidth + })} + + + ); + } +} + +class AccountUpgradeMonthly extends AccountUpgradeOption { + get title() { + return 'title_monthly'; + } + + get description() { + return plans[1].priceOptions[0].price; + } + + get paymentInfo() { + return plans[1].paymentInfoMonthly; + } + + action() { + payments.purchase(plans[1].priceOptions[0].id); + } +} +class AccountUpgradeAnnual extends AccountUpgradeOption { + get title() { + return 'title_annual'; + } + + get description() { + return plans[1].priceOptions[1].price; + } + + get paymentInfo() { + return plans[1].paymentInfoAnnual; + } + + action() { + payments.purchase(plans[1].priceOptions[1].id); + } +} + +module.exports = { AccountUpgradeMonthly, AccountUpgradeAnnual }; diff --git a/app/components/settings/account-upgrade-plan.js b/app/components/settings/account-upgrade-plan.js deleted file mode 100644 index 305311a0c..000000000 --- a/app/components/settings/account-upgrade-plan.js +++ /dev/null @@ -1,186 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { View, ActivityIndicator, ScrollView, Dimensions } from 'react-native'; -import { observer } from 'mobx-react/native'; -import Text from '../controls/custom-text'; -import AccountUpgradeToggle from './account-upgrade-toggle'; -import PaymentsInfoPopup from '../payments/payments-info-popup'; -import payments from '../payments/payments'; -import { vars } from '../../styles/styles'; -import { popupControl } from '../shared/popups'; -import { tx } from '../utils/translator'; - -const { width } = Dimensions.get('window'); - -const topTitleText = { - fontSize: vars.accountTitleFontSize, - color: 'white' -}; - -const smallText = { - fontSize: vars.font.size14, - opacity: 0.7, - color: 'white', - marginLeft: vars.spacing.small.midi2x -}; - -const featureListText = [topTitleText, {}]; - -const featureListTextMedium = [ - featureListText, - { - fontSize: vars.accountListFontSize - } -]; - -const planFooterInfo = [ - featureListTextMedium, - { - textAlign: 'center' - } -]; - -const featureSmallText = { - color: 'white', - fontSize: vars.font.size14 -}; - -const block0 = { - paddingHorizontal: vars.spacing.medium.maxi2x -}; - -const block1 = [ - block0, - { - marginBottom: vars.spacing.medium.maxi2x - } -]; - -const textRow = { - flexDirection: 'row', - alignItems: 'center' -}; - -const borderView = { - borderColor: '#FFFFFFAA', - borderBottomWidth: 1, - paddingBottom: vars.spacing.medium.maxi2x, - paddingHorizontal: vars.spacing.small.maxi2x, - marginHorizontal: vars.spacing.small.maxi2x, - marginBottom: vars.spacing.medium.maxi2x -}; - -@observer -export default class AccountUpgradePlan extends Component { - largeSmallTextRow(largeTextString, smallTextString) { - return ( - - {largeTextString} - {smallTextString} - - ); - } - - mediumSmallTextRow(largeTextString, smallTextString) { - return ( - - {largeTextString} - {smallTextString} - - ); - } - - featureText(text) { - return ( - - - {text} - - - ); - } - - get alwaysFree() { - return ( - - {tx('title_alwaysFree')} - - ); - } - - get priceOptions() { - const { priceOptions, canUpgradeTo, isCurrent, paymentInfo } = this.props.plan; - // if (!priceOptions) return this.alwaysFree; - if (isCurrent) return {tx('title_yourCurrentPlan')}; - if (!canUpgradeTo) - return {tx('title_cannotUpgradePlan')}; - return ( - - {priceOptions.map(({ title, price, id }, i) => ( - { - await popupControl( - , - 'button_upgrade' - ); - payments.purchase(id); - }} - text1={price} - text2={tx(title).toLowerCase()} - left={i === 0} - highlight={i > 0} - /> - ))} - - ); - } - - get footer() { - return payments.inProgress ? ( - - ) : ( - this.priceOptions - ); - } - - render() { - const { title, includes, info, storage } = this.props.plan; - return ( - - - - - {tx('title_appName')} {tx(title)} - - - - {this.largeSmallTextRow(storage, tx('title_encryptedStorage'))} - - - {includes && this.featureText(includes)} - {info.split('\n').map(this.featureText)} - - - {this.footer} - - ); - } -} - -AccountUpgradePlan.propTypes = { - plan: PropTypes.any -}; diff --git a/app/components/settings/account-upgrade-state.js b/app/components/settings/account-upgrade-state.js new file mode 100644 index 000000000..7132b7572 --- /dev/null +++ b/app/components/settings/account-upgrade-state.js @@ -0,0 +1,10 @@ +import { t } from 'peerio-translator'; +import RoutedState from '../routes/routed-state'; + +class AccountUpgradeState extends RoutedState { + get title() { + return t('button_upgrade'); + } +} + +export default new AccountUpgradeState(); diff --git a/app/components/settings/account-upgrade-swiper.js b/app/components/settings/account-upgrade-swiper.js deleted file mode 100644 index 35a6faf40..000000000 --- a/app/components/settings/account-upgrade-swiper.js +++ /dev/null @@ -1,98 +0,0 @@ -import React, { Component } from 'react'; -import { ScrollView, Dimensions, View } from 'react-native'; -import { observer } from 'mobx-react/native'; -import { observable, reaction } from 'mobx'; -import { vars } from '../../styles/styles'; -import AccountUpgradeNavigator from './account-upgrade-navigator'; -import AccountUpgradePlan from './account-upgrade-plan'; -import plans from '../payments/payments-config'; -import icons from '../helpers/icons'; -import routes from '../routes/routes'; -import { User } from '../../lib/icebear'; -import { t } from '../utils/translator'; -import { popupYes } from '../shared/popups'; -import { transitionAnimation } from '../helpers/animations'; - -const { width } = Dimensions.get('window'); - -const card = { - backgroundColor: vars.darkBlue, - paddingTop: vars.spacing.large.midi2x -}; - -const container = { flex: 1, flexGrow: 1, backgroundColor: vars.darkBlue }; - -@observer -export default class AccountUpgradeSwiper extends Component { - @observable selected = 0; - - componentWillMount() { - reaction(() => this.selected, transitionAnimation); - const topPlanIndex = plans.topPlanIndex(); - setTimeout(() => { - topPlanIndex === -1 - ? this._scrollView.scrollToEnd({ animated: false }) - : this._scrollView.scrollTo({ x: topPlanIndex * width, animated: false }); - }, 0); - if (User.current) { - console.log('account-upgrade-swiper: active plans'); - User.current && console.log(User.current.activePlans); - if (User.current.addresses.filter(e => e.confirmed).length === 0) { - popupYes('', '', t('error_upgradingAccountNoConfirmedEmail')).then(() => - routes.modal.discard() - ); - } - } - } - - jumpTo = (index, skipAnimated) => { - this._scrollView.scrollTo({ x: index * width, y: 0, animated: !skipAnimated }); - }; - - handleScroll = event => { - const { x } = event.nativeEvent.contentOffset; - this.selected = Math.round(x / width); - }; - - get exitRow() { - const s = { - position: 'absolute', - top: vars.statusBarHeight + 12, - right: 12 - }; - return ( - - {icons.white('close', () => routes.modal.discard(), { - backgroundColor: 'transparent' - })} - - ); - } - - render() { - return ( - - { - this._scrollView = sv; - }} - onScroll={this.handleScroll} - key="scroll" - horizontal - pagingEnabled - removeClippedSubviews={false}> - - - - {this.exitRow} - - - ); - } -} diff --git a/app/components/settings/account-upgrade-toggle.js b/app/components/settings/account-upgrade-toggle.js deleted file mode 100644 index eab0324ee..000000000 --- a/app/components/settings/account-upgrade-toggle.js +++ /dev/null @@ -1,60 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { TouchableOpacity } from 'react-native'; -import { observer } from 'mobx-react/native'; -import Text from '../controls/custom-text'; -import { vars } from '../../styles/styles'; - -@observer -export default class AccountUpgradeToggle extends Component { - render() { - const { highlight, left, text1, text2 } = this.props; - const toggleContainer = { - backgroundColor: highlight ? 'white' : 'transparent', - borderWidth: 2, - borderColor: 'white', - flex: 1, - flexGrow: 1, - padding: vars.spacing.small.mini2x, - alignItems: 'center', - marginRight: left ? vars.spacing.medium.midi : 0 - }; - const textStyle = { - color: highlight ? 'black' : 'white' - }; - - const text1Style = [ - textStyle, - { - fontSize: vars.font.size12 - } - ]; - - const text2Style = [ - textStyle, - { - opacity: 0.7 - } - ]; - - return ( - - - {text1} - - {text2} - - ); - } -} - -AccountUpgradeToggle.propTypes = { - onPress: PropTypes.any, - highlight: PropTypes.bool, - left: PropTypes.bool, - text1: PropTypes.string, - text2: PropTypes.string -}; diff --git a/app/components/settings/settings-level-1.js b/app/components/settings/settings-level-1.js index e27cac118..26436f925 100644 --- a/app/components/settings/settings-level-1.js +++ b/app/components/settings/settings-level-1.js @@ -36,6 +36,7 @@ import { TopDrawerBackupAccountKey, TopDrawerNewContact } from '../shared/top-dr import routes from '../routes/routes'; import uiState from '../layout/ui-state'; import { testConfirmEmail } from '../helpers/test-confirm-email'; +import whiteLabelComponents from '../../components/whitelabel/white-label-components'; const svStyle = { flexGrow: 1, @@ -144,9 +145,7 @@ export default class SettingsLevel1 extends SafeComponent { renderThrow() { const plan = plans.topPlan(); const upgradeItem = plan ? ( - settingsState.upgrade()} + ) : ( diff --git a/app/components/settings/settings-state.js b/app/components/settings/settings-state.js index 198051cc8..f5aaac034 100644 --- a/app/components/settings/settings-state.js +++ b/app/components/settings/settings-state.js @@ -69,7 +69,7 @@ class SettingsState extends RoutedState { } upgrade() { - this.routerModal.accountUpgradeSwiper(); + this.routerMain.accountUpgrade(); } async showPassphrase() { diff --git a/app/components/states.js b/app/components/states.js index 12f5f4843..67d1f8c76 100644 --- a/app/components/states.js +++ b/app/components/states.js @@ -9,6 +9,7 @@ import contactState from './contacts/contact-state'; import contactAddState from './contacts/contact-add-state'; import invitationState from './messaging/invitation-state'; import drawerState from './shared/drawer-state'; +import accountUpgradeState from './settings/account-upgrade-state'; export { settingsState, @@ -21,5 +22,6 @@ export { contactState, contactAddState, invitationState, - drawerState + drawerState, + accountUpgradeState }; diff --git a/app/components/whitelabel/medcryptor/medcryptor-manage-account-button.js b/app/components/whitelabel/medcryptor/medcryptor-manage-account-button.js new file mode 100644 index 000000000..f5ff4c54f --- /dev/null +++ b/app/components/whitelabel/medcryptor/medcryptor-manage-account-button.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { observer } from 'mobx-react/native'; +import { Linking, Platform } from 'react-native'; +import SafeComponent from '../../shared/safe-component'; +import SettingsItem from '../../settings/settings-item'; +import { tx } from '../../utils/translator'; +import { config } from '../../../lib/icebear'; + +@observer +export default class MedcryptorManageAccountButton extends SafeComponent { + renderThrow() { + const { leftComponent } = this.props; + return ( + + Linking.openURL(config.translator.urlMap.manageSubscription[Platform.OS]) + } + leftComponent={leftComponent} + /> + ); + } +} diff --git a/app/components/whitelabel/medcryptor/medcryptor-white-label-components.js b/app/components/whitelabel/medcryptor/medcryptor-white-label-components.js index f535996c7..3447c6e97 100644 --- a/app/components/whitelabel/medcryptor/medcryptor-white-label-components.js +++ b/app/components/whitelabel/medcryptor/medcryptor-white-label-components.js @@ -5,9 +5,11 @@ import MedcryptorChatList from './medcryptor-chat-list'; import MedcryptorChat from './medcryptor-chat'; import MedcryptorContactAddWarning from './medcryptor-contact-add-warning'; import MedcryptorChannelInvite from './medcryptor-channel-invite'; +import MedcryptorManageAccountButton from './medcryptor-manage-account-button'; export default { ContactAddWarning: MedcryptorContactAddWarning, + ManageAccountButton: MedcryptorManageAccountButton, ChatList: MedcryptorChatList, Chat: MedcryptorChat, ChannelInvite: MedcryptorChannelInvite, diff --git a/app/components/whitelabel/peerio/peerio-manage-account-button.js b/app/components/whitelabel/peerio/peerio-manage-account-button.js new file mode 100644 index 000000000..064963246 --- /dev/null +++ b/app/components/whitelabel/peerio/peerio-manage-account-button.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { observer } from 'mobx-react/native'; +import { Linking } from 'react-native'; +import SafeComponent from '../../shared/safe-component'; +import SettingsItem from '../../settings/settings-item'; +import { tx } from '../../utils/translator'; +import { config } from '../../../lib/icebear'; + +@observer +export default class PeerioManageAccountButton extends SafeComponent { + renderThrow() { + const { leftComponent } = this.props; + return ( + Linking.openURL(config.translator.urlMap.manageSubscription.link)} + leftComponent={leftComponent} + /> + ); + } +} diff --git a/app/components/whitelabel/peerio/peerio-white-label-components.js b/app/components/whitelabel/peerio/peerio-white-label-components.js index 8dd10f60c..fa82b3db7 100644 --- a/app/components/whitelabel/peerio/peerio-white-label-components.js +++ b/app/components/whitelabel/peerio/peerio-white-label-components.js @@ -4,9 +4,11 @@ import ChatList from '../../../components/messaging/chat-list'; import Chat from '../../../components/messaging/chat'; import PeerioContactAddWarning from './peerio-contact-add-warning'; import ChannelInvite from '../../messaging/channel-invite'; +import PeerioManageAccountButton from './peerio-manage-account-button'; export default { ContactAddWarning: PeerioContactAddWarning, + ManageAccountButton: PeerioManageAccountButton, ChatList, Chat, ChannelInvite, diff --git a/app/lib/mobile-config.js b/app/lib/mobile-config.js index 7a20664ef..76a9700e3 100644 --- a/app/lib/mobile-config.js +++ b/app/lib/mobile-config.js @@ -122,6 +122,13 @@ export default (c, icebear, tm) => { }, maintenanceReadMore: { link: 'https://peerio.zendesk.com/hc/en-us/articles/360000371866' + }, + manageSubscription: { + link: + whitelabel.MANAGE_SUBSCRIPTION || + 'https://support.peerio.com/hc/en-us/articles/208395556-How-do-I-manage-my-Peerio-plan-', + ios: 'https://support.apple.com/en-us/HT202039', + android: 'https://support.google.com/googleplay/answer/7018481' } };