From ea71fced95a6923926c92ada523840ebdbd0ef64 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Mon, 8 Apr 2019 15:18:58 +0200 Subject: Replace invoices & subscription info with links to website --- src/api/PaymentApi.js | 8 -- src/api/server/ServerApi.js | 17 ---- .../settings/account/AccountDashboard.js | 107 +++++++-------------- src/config.js | 5 + src/containers/settings/AccountScreen.js | 69 +++++++------ src/environment.js | 14 ++- src/stores/PaymentStore.js | 17 ---- src/styles/badge.scss | 1 + src/styles/settings.scss | 13 ++- 9 files changed, 103 insertions(+), 148 deletions(-) (limited to 'src') diff --git a/src/api/PaymentApi.js b/src/api/PaymentApi.js index 3f6bb442e..7325151e9 100644 --- a/src/api/PaymentApi.js +++ b/src/api/PaymentApi.js @@ -11,12 +11,4 @@ export default class PaymentApi { getHostedPage(planId) { return this.server.getHostedPage(planId); } - - getDashboardUrl() { - return this.server.getPaymentDashboardUrl(); - } - - getOrders() { - return this.server.getSubscriptionOrders(); - } } diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js index bafeef005..f6bc9c283 100644 --- a/src/api/server/ServerApi.js +++ b/src/api/server/ServerApi.js @@ -418,23 +418,6 @@ export default class ServerApi { return data; } - async getPaymentDashboardUrl() { - const request = await sendAuthRequest(`${API_URL}/me/billing`); - if (!request.ok) throw request; - const data = await request.json(); - debug('ServerApi::getPaymentDashboardUrl resolves', data); - return data; - } - - async getSubscriptionOrders() { - const request = await sendAuthRequest(`${API_URL}/me/subscription`); - if (!request.ok) throw request; - const data = await request.json(); - const orders = this._mapOrderModels(data); - debug('ServerApi::getSubscriptionOrders resolves', orders); - return orders; - } - // News async getLatestNews() { const url = `${API_URL}/news?platform=${os.platform()}&arch=${os.arch()}&version=${app.getVersion()}`; diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 181b95c8c..ca8b9e1bd 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js @@ -3,12 +3,10 @@ import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import ReactTooltip from 'react-tooltip'; -import moment from 'moment'; import Loader from '../../ui/Loader'; import Button from '../../ui/Button'; import Infobox from '../../ui/Infobox'; -import Link from '../../ui/Link'; import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; const messages = defineMessages({ @@ -24,10 +22,6 @@ const messages = defineMessages({ id: 'settings.account.headlineUpgrade', defaultMessage: '!!!Upgrade your Account', }, - headlineInvoices: { - id: 'settings.account.headlineInvoices', - defaultMessage: '!!Invoices', - }, headlineDangerZone: { id: 'settings.account.headlineDangerZone', defaultMessage: '!!Danger Zone', @@ -48,6 +42,10 @@ const messages = defineMessages({ id: 'settings.account.account.editButton', defaultMessage: '!!!Edit Account', }, + invoicesButton: { + id: 'settings.account.headlineInvoices', + defaultMessage: '!!Invoices', + }, invoiceDownload: { id: 'settings.account.invoiceDownload', defaultMessage: '!!!Download', @@ -77,19 +75,17 @@ const messages = defineMessages({ export default @observer class AccountDashboard extends Component { static propTypes = { user: MobxPropTypes.observableObject.isRequired, - orders: MobxPropTypes.arrayOrObservableArray.isRequired, isLoading: PropTypes.bool.isRequired, - isLoadingOrdersInfo: PropTypes.bool.isRequired, isLoadingPlans: PropTypes.bool.isRequired, - isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired, userInfoRequestFailed: PropTypes.bool.isRequired, retryUserInfoRequest: PropTypes.func.isRequired, - openDashboard: PropTypes.func.isRequired, - openExternalUrl: PropTypes.func.isRequired, onCloseSubscriptionWindow: PropTypes.func.isRequired, deleteAccount: PropTypes.func.isRequired, isLoadingDeleteAccount: PropTypes.bool.isRequired, isDeleteAccountSuccessful: PropTypes.bool.isRequired, + openEditAccount: PropTypes.func.isRequired, + openBilling: PropTypes.func.isRequired, + openInvoices: PropTypes.func.isRequired, }; static contextTypes = { @@ -99,12 +95,7 @@ export default @observer class AccountDashboard extends Component { render() { const { user, - orders, isLoading, - isCreatingPaymentDashboardUrl, - openDashboard, - openExternalUrl, - isLoadingOrdersInfo, isLoadingPlans, userInfoRequestFailed, retryUserInfoRequest, @@ -112,6 +103,9 @@ export default @observer class AccountDashboard extends Component { deleteAccount, isLoadingDeleteAccount, isDeleteAccountSuccessful, + openEditAccount, + openBilling, + openInvoices, } = this.props; const { intl } = this.context; @@ -161,68 +155,39 @@ export default @observer class AccountDashboard extends Component {

{`${user.firstname} ${user.lastname}`} + {user.isPremium && ( + <> + {' '} + {intl.formatMessage(messages.accountTypePremium)} + + )}

{user.organization && `${user.organization}, `} {user.email} -
- {user.isPremium && ( - {intl.formatMessage(messages.accountTypePremium)} - )} -
- - {intl.formatMessage(messages.accountEditButton)} - - {user.emailValidated} - - - )} - - {user.isSubscriptionOwner && ( - isLoadingOrdersInfo ? ( - - ) : ( -
- {orders.length > 0 && ( - -
-

{intl.formatMessage(messages.headlineSubscription)}

-
- {orders[0].name} - {orders[0].price} +
+
-
-
-

{intl.formatMessage(messages.headlineInvoices)}

- - - {orders.map(order => ( - - - - - ))} - -
- {moment(order.date).format('DD.MM.YYYY')} - - -
-
- - )} +
+
- ) + )} {!user.isPremium && ( diff --git a/src/config.js b/src/config.js index 479572edb..4423e61e9 100644 --- a/src/config.js +++ b/src/config.js @@ -12,6 +12,11 @@ export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks export const LOCAL_API = 'http://localhost:3000'; export const DEV_API = 'https://dev.franzinfra.com'; export const LIVE_API = 'https://api.franzinfra.com'; + +export const LOCAL_API_WEBSITE = 'http://localhost:3333'; +export const DEV_API_WEBSITE = 'https://meetfranz.com'; +export const LIVE_API_WEBSITE = 'https://meetfranz.com'; + export const GA_ID = !isDevMode ? 'UA-74126766-10' : 'UA-74126766-12'; export const DEFAULT_APP_SETTINGS = { diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js index ce1b9c333..0c837fab9 100644 --- a/src/containers/settings/AccountScreen.js +++ b/src/containers/settings/AccountScreen.js @@ -9,6 +9,7 @@ import AppStore from '../../stores/AppStore'; import AccountDashboard from '../../components/settings/account/AccountDashboard'; import ErrorBoundary from '../../components/util/ErrorBoundary'; +import { WEBSITE } from '../../environment'; const { BrowserWindow } = remote; @@ -24,69 +25,77 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend onCloseWindow() { const { user, payment } = this.props.stores; user.getUserInfoRequest.invalidate({ immediately: true }); - payment.ordersDataRequest.invalidate({ immediately: true }); } reloadData() { const { user, payment } = this.props.stores; user.getUserInfoRequest.reload(); - payment.ordersDataRequest.reload(); payment.plansRequest.reload(); } async handlePaymentDashboard() { const { actions, stores } = this.props; - actions.payment.createDashboardUrl(); - - const dashboard = await stores.payment.createDashboardUrlRequest; - - if (dashboard.url) { - const paymentWindow = new BrowserWindow({ - title: '🔒 Franz Subscription Dashboard', - parent: remote.getCurrentWindow(), - modal: false, - width: 900, - minWidth: 600, - webPreferences: { - nodeIntegration: false, - }, - }); - paymentWindow.loadURL(dashboard.url); - - paymentWindow.on('closed', () => { - this.onCloseWindow(); - }); - } + // actions.payment.createDashboardUrl(); + + // const dashboard = await stores.payment.createDashboardUrlRequest; + + // if (dashboard.url) { + // const paymentWindow = new BrowserWindow({ + // title: '🔒 Franz Subscription Dashboard', + // parent: remote.getCurrentWindow(), + // modal: false, + // width: 900, + // minWidth: 600, + // webPreferences: { + // nodeIntegration: false, + // }, + // }); + // paymentWindow.loadURL(dashboard.url); + + // paymentWindow.on('closed', () => { + // this.onCloseWindow(); + // }); + // } + + const url = `${WEBSITE}/user/billing?token=${stores.user.authToken}&utm_source=app&utm_medium=edit_profile`; + + actions.app.openExternalUrl({ url }); + } + + handleWebsiteLink(route) { + const { actions, stores } = this.props; + + const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`; + console.log(url); + + actions.app.openExternalUrl({ url }); } render() { const { user, payment } = this.props.stores; - const { openExternalUrl } = this.props.actions.app; const { user: userActions } = this.props.actions; const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; - const isLoadingOrdersInfo = payment.ordersDataRequest.isExecuting; const isLoadingPlans = payment.plansRequest.isExecuting; return ( this.reloadData()} - isCreatingPaymentDashboardUrl={payment.createDashboardUrlRequest.isExecuting} - openDashboard={price => this.handlePaymentDashboard(price)} - openExternalUrl={url => openExternalUrl({ url })} onCloseSubscriptionWindow={() => this.onCloseWindow()} deleteAccount={userActions.delete} isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting} isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError} + openEditAccount={() => this.handleWebsiteLink('/user/profile')} + openBilling={() => this.handleWebsiteLink('/user/billing')} + openInvoices={() => this.handleWebsiteLink('/user/invoices')} /> ); diff --git a/src/environment.js b/src/environment.js index 73b1c7ab2..68fa45173 100644 --- a/src/environment.js +++ b/src/environment.js @@ -1,6 +1,13 @@ import isDev from 'electron-is-dev'; -import { LIVE_API, DEV_API, LOCAL_API } from './config'; +import { + LIVE_API, + DEV_API, + LOCAL_API, + LOCAL_API_WEBSITE, + DEV_API_WEBSITE, + LIVE_API_WEBSITE, +} from './config'; export const isDevMode = isDev; export const useLiveAPI = process.env.LIVE_API; @@ -19,12 +26,17 @@ export const ctrlKey = isMac ? '⌘' : 'Ctrl'; export const cmdKey = isMac ? 'Cmd' : 'Ctrl'; let api; +let web; if (!isDevMode || (isDevMode && useLiveAPI)) { api = LIVE_API; + web = LIVE_API_WEBSITE; } else if (isDevMode && useLocalAPI) { api = LOCAL_API; + web = LOCAL_API_WEBSITE; } else { api = DEV_API; + web = DEV_API_WEBSITE; } export const API = api; +export const WEBSITE = web; diff --git a/src/stores/PaymentStore.js b/src/stores/PaymentStore.js index 4cabee194..d4de476c8 100644 --- a/src/stores/PaymentStore.js +++ b/src/stores/PaymentStore.js @@ -10,15 +10,10 @@ export default class PaymentStore extends Store { @observable createHostedPageRequest = new Request(this.api.payment, 'getHostedPage'); - @observable createDashboardUrlRequest = new Request(this.api.payment, 'getDashboardUrl'); - - @observable ordersDataRequest = new CachedRequest(this.api.payment, 'getOrders'); - constructor(...args) { super(...args); this.actions.payment.createHostedPage.listen(this._createHostedPage.bind(this)); - this.actions.payment.createDashboardUrl.listen(this._createDashboardUrl.bind(this)); } @computed get plan() { @@ -28,10 +23,6 @@ export default class PaymentStore extends Store { return this.plansRequest.execute().result || {}; } - @computed get orders() { - return this.ordersDataRequest.execute().result || []; - } - @action _createHostedPage({ planId }) { const request = this.createHostedPageRequest.execute(planId); @@ -39,12 +30,4 @@ export default class PaymentStore extends Store { return request; } - - @action _createDashboardUrl() { - const request = this.createDashboardUrlRequest.execute(); - - gaEvent('Payment', 'createDashboardUrl'); - - return request; - } } diff --git a/src/styles/badge.scss b/src/styles/badge.scss index f9fac039a..be3a1055d 100644 --- a/src/styles/badge.scss +++ b/src/styles/badge.scss @@ -19,6 +19,7 @@ display: inline-block; font-size: 14px; padding: 5px 10px; + letter-spacing: 0; &.badge--primary, &.badge--premium { diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 750b6bedd..b286c6f1b 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -62,13 +62,18 @@ .account { .account__box { background: $dark-theme-gray-darker; } - .invoices { - td { border-bottom: 1px solid $dark-theme-gray-darker; } - .invoices__action button { color: $theme-brand-primary; } + .badge--premium { + margin-left: 10px; + } + + .manage-user-links { + margin-top: 20px; + display: flex; + justify-content: space-between; } } - .premium-info { + .premium-info { background: $dark-theme-gray-darker; border: 2px solid $theme-brand-primary; } -- cgit v1.2.3-70-g09d2