diff --git a/.env.example b/.env.example
index 3004daa76..b116e6d40 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,3 @@
NODE_ENV=development
# BACKEND_URL="https://example.com"
-# PATRON_URL="https://patron.example.com"
# PROXY_HTTPS_INSECURE=false
diff --git a/README.md b/README.md
index 954562943..30fa61a1d 100644
--- a/README.md
+++ b/README.md
@@ -124,7 +124,7 @@ For https, be sure to also set `PROXY_HTTPS_INSECURE=true`.
Allows using an HTTPS backend if set to `true`.
-This is needed if `BACKEND_URL` or `PATRON_URL` are set to an `https://` value.
+This is needed if `BACKEND_URL` is set to an `https://` value.
[More info](https://stackoverflow.com/a/48624590/8811886).
**Default:** `false`
diff --git a/app/soapbox/actions/patron.js b/app/soapbox/actions/patron.js
index 6b4885c9a..3f32e2ad8 100644
--- a/app/soapbox/actions/patron.js
+++ b/app/soapbox/actions/patron.js
@@ -1,11 +1,12 @@
-import api from '../api';
+import axios from 'axios';
export const PATRON_FUNDING_IMPORT = 'PATRON_FUNDING_IMPORT';
export const PATRON_FUNDING_FETCH_FAIL = 'PATRON_FUNDING_FETCH_FAIL';
export function fetchFunding() {
return (dispatch, getState) => {
- api(getState).get('/patron/v1/funding').then(response => {
+ const baseUrl = getState().getIn(['soapbox', 'extensions', 'patron', 'baseUrl']);
+ axios.get(`${baseUrl}/api/patron/v1/instance`).then(response => {
dispatch(importFetchedFunding(response.data));
}).catch(error => {
dispatch(fetchFundingFail(error));
diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 844a1bc4d..6c9a6e7ad 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -15,6 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
import { isStaff } from '../utils/accounts';
import { makeGetAccount } from '../selectors';
import { logOut } from 'soapbox/actions/auth';
+import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -39,11 +40,12 @@ const messages = defineMessages({
const mapStateToProps = state => {
const me = state.get('me');
const getAccount = makeGetAccount();
+ const patron = state.getIn(['soapbox', 'extensions', 'patron'], ImmutableMap());
return {
account: getAccount(state, me),
sidebarOpen: state.get('sidebar').sidebarOpen,
- hasPatron: state.getIn(['soapbox', 'extensions', 'patron']),
+ patronUrl: patron.get('enabled') && patron.get('baseUrl'),
isStaff: isStaff(state.getIn(['accounts', me])),
};
};
@@ -75,7 +77,7 @@ class SidebarMenu extends ImmutablePureComponent {
}
render() {
- const { sidebarOpen, onClose, intl, account, onClickLogOut, hasPatron, isStaff } = this.props;
+ const { sidebarOpen, onClose, intl, account, onClickLogOut, patronUrl, isStaff } = this.props;
if (!account) return null;
const acct = account.get('acct');
@@ -127,11 +129,11 @@ class SidebarMenu extends ImmutablePureComponent {
{intl.formatMessage(messages.messages)}
- {hasPatron ?
-
+ {patronUrl ?
+
{intl.formatMessage(messages.donate)}
-
+
: ''}
diff --git a/app/soapbox/features/ui/components/funding_panel.js b/app/soapbox/features/ui/components/funding_panel.js
index 7650c8cdf..df96512e2 100644
--- a/app/soapbox/features/ui/components/funding_panel.js
+++ b/app/soapbox/features/ui/components/funding_panel.js
@@ -5,6 +5,16 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import ProgressBar from '../../../components/progress_bar';
import { fetchFunding } from 'soapbox/actions/patron';
+const moneyFormat = amount => (
+ new Intl
+ .NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'usd',
+ notation: 'compact',
+ })
+ .format(amount/100)
+);
+
class FundingPanel extends ImmutablePureComponent {
componentDidMount() {
@@ -12,21 +22,22 @@ class FundingPanel extends ImmutablePureComponent {
}
render() {
- const { funding } = this.props;
+ const { funding, patronUrl } = this.props;
if (!funding) {
return null;
}
+ const amount = funding.getIn(['funding', 'amount']);
const goal = funding.getIn(['goals', '0', 'amount']);
const goal_text = funding.getIn(['goals', '0', 'text']);
- const goal_reached = funding.get('amount') >= goal;
+ const goal_reached = amount >= goal;
let ratio_text;
if (goal_reached) {
- ratio_text = <>${Math.floor(goal/100)} per month— reached!>;
+ ratio_text = <>{moneyFormat(goal)} per month— reached!>;
} else {
- ratio_text = <>${Math.floor(funding.get('amount')/100)} out of ${Math.floor(goal/100)} per month>;
+ ratio_text = <>{moneyFormat(amount)} out of {moneyFormat(goal)} per month>;
}
return (
@@ -41,11 +52,11 @@ class FundingPanel extends ImmutablePureComponent {
{ratio_text}
-
+
{goal_text}
- Donate
+ {patronUrl && Donate}
);
@@ -56,6 +67,7 @@ class FundingPanel extends ImmutablePureComponent {
const mapStateToProps = state => {
return {
funding: state.getIn(['patron', 'funding']),
+ patronUrl: state.getIn(['soapbox', 'extensions', 'patron', 'baseUrl']),
};
};
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index 6a6a7f6fe..f06bd90eb 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -16,7 +16,7 @@ const mapStateToProps = state => {
const me = state.get('me');
return {
account: state.getIn(['accounts', me]),
- hasPatron: state.getIn(['soapbox', 'extensions', 'patron']),
+ hasPatron: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']),
features: getFeatures(state.get('instance')),
};
};
diff --git a/static/instance/soapbox.example.json b/static/instance/soapbox.example.json
index 9083c8e7f..540fc51ed 100644
--- a/static/instance/soapbox.example.json
+++ b/static/instance/soapbox.example.json
@@ -13,7 +13,10 @@
}]
},
"extensions": {
- "patron": false
+ "patron": {
+ "enabled": false,
+ "baseUrl": "https://patron.example.com"
+ }
},
"defaultSettings": {
"autoPlayGif": false,
diff --git a/webpack/development.js b/webpack/development.js
index a16df0fbf..98ce3e718 100644
--- a/webpack/development.js
+++ b/webpack/development.js
@@ -9,7 +9,6 @@ const { settings, output } = require('./configuration');
const watchOptions = {};
const backendUrl = process.env.BACKEND_URL || 'http://localhost:4000';
-const patronUrl = process.env.PATRON_URL || 'http://localhost:5000';
const secureProxy = !(process.env.PROXY_HTTPS_INSECURE === 'true');
const backendEndpoints = [
@@ -22,7 +21,6 @@ const backendEndpoints = [
'/.well-known/webfinger',
'/static',
'/emoji',
- '/patron',
];
const makeProxyConfig = () => {
@@ -33,10 +31,6 @@ const makeProxyConfig = () => {
secure: secureProxy,
};
});
- proxyConfig['/patron'] = {
- target: patronUrl,
- secure: secureProxy,
- };
return proxyConfig;
};