diff --git a/app/javascript/gabsocial/components/timeline_injections/progress_injection.js b/app/javascript/gabsocial/components/timeline_injections/progress_injection.js
new file mode 100644
index 00000000..e697a6a3
--- /dev/null
+++ b/app/javascript/gabsocial/components/timeline_injections/progress_injection.js
@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { injectIntl, defineMessages } from 'react-intl'
+import { monthlyExpensesComplete } from '../../initial_state'
+import {
+ URL_DISSENTER_SHOP,
+ URL_DISSENTER_SHOP_DONATIONS,
+} from '../../constants'
+import TimelineInjectionLayout from './timeline_injection_layout'
+import ProgressBar from '../progress_bar'
+import Button from '../button'
+import Text from '../text'
+
+class ProgressInjection extends React.PureComponent {
+
+ render() {
+ const {
+ intl,
+ isXS,
+ injectionId,
+ } = this.props
+
+ if (!monthlyExpensesComplete || !isXS) return
+
+ const value = Math.min(parseFloat(monthlyExpensesComplete), 100)
+
+ return (
+
+
+
+ )
+ }
+
+}
+
+const messages = defineMessages({
+ progressTitle: { id: 'progress_title', defaultMessage: '{value}% covered this month' },
+ operationsTitle: { id: 'operations_title', defaultMessage: "Gab's Operational Expenses" },
+ operationsSubtitle: { id: 'operations_subtitle', defaultMessage: 'We are 100% funded by you' },
+ donationTitle: { id: 'make_donation', defaultMessage: 'Make a Donation' },
+})
+
+ProgressInjection.propTypes = {
+ injectionId: PropTypes.string.isRequired,
+}
+
+export default injectIntl(ProgressInjection)
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js b/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js
index fa0e7a5b..da8eb720 100644
--- a/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js
+++ b/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js
@@ -2,6 +2,7 @@ import {
BREAKPOINT_EXTRA_SMALL,
TIMELINE_INJECTION_FEATURED_GROUPS,
TIMELINE_INJECTION_GROUP_CATEGORIES,
+ TIMELINE_INJECTION_PROGRESS,
TIMELINE_INJECTION_PRO_UPGRADE,
TIMELINE_INJECTION_PWA,
TIMELINE_INJECTION_SHOP,
@@ -10,6 +11,7 @@ import {
import {
FeaturedGroupsInjection,
GroupCategoriesInjection,
+ ProgressInjection,
ProUpgradeInjection,
PWAInjection,
ShopInjection,
@@ -26,6 +28,7 @@ const initialState = getWindowDimension()
const INJECTION_COMPONENTS = {}
INJECTION_COMPONENTS[TIMELINE_INJECTION_FEATURED_GROUPS] = FeaturedGroupsInjection
INJECTION_COMPONENTS[TIMELINE_INJECTION_GROUP_CATEGORIES] = GroupCategoriesInjection
+INJECTION_COMPONENTS[TIMELINE_INJECTION_PROGRESS] = ProgressInjection
INJECTION_COMPONENTS[TIMELINE_INJECTION_PRO_UPGRADE] = ProUpgradeInjection
INJECTION_COMPONENTS[TIMELINE_INJECTION_PWA] = PWAInjection
INJECTION_COMPONENTS[TIMELINE_INJECTION_SHOP] = ShopInjection
diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js
index ac651195..a1f956f2 100644
--- a/app/javascript/gabsocial/constants.js
+++ b/app/javascript/gabsocial/constants.js
@@ -141,6 +141,7 @@ export const TOAST_TYPE_SUCCESS = 'success'
export const TIMELINE_INJECTION_FEATURED_GROUPS = 'TI_FEATURED_GROUPS'
export const TIMELINE_INJECTION_GROUP_CATEGORIES = 'TI_GROUP_CATEGORIES'
+export const TIMELINE_INJECTION_PROGRESS = 'TI_PROGRESS'
export const TIMELINE_INJECTION_PRO_UPGRADE = 'TI_PRO_UPGRADE'
export const TIMELINE_INJECTION_PWA = 'TI_PWA'
export const TIMELINE_INJECTION_SHOP = 'TI_SHOP'
diff --git a/app/javascript/gabsocial/reducers/settings.js b/app/javascript/gabsocial/reducers/settings.js
index 214354d6..c6db27d7 100644
--- a/app/javascript/gabsocial/reducers/settings.js
+++ b/app/javascript/gabsocial/reducers/settings.js
@@ -8,6 +8,7 @@ import {
TIMELINE_INJECTION_WEIGHT_DEFAULT,
TIMELINE_INJECTION_FEATURED_GROUPS,
TIMELINE_INJECTION_GROUP_CATEGORIES,
+ TIMELINE_INJECTION_PROGRESS,
TIMELINE_INJECTION_PRO_UPGRADE,
TIMELINE_INJECTION_PWA,
TIMELINE_INJECTION_SHOP,
@@ -26,6 +27,7 @@ const initialState = ImmutableMap({
injections: ImmutableMap({
[TIMELINE_INJECTION_FEATURED_GROUPS]: TIMELINE_INJECTION_WEIGHT_DEFAULT,
[TIMELINE_INJECTION_GROUP_CATEGORIES]: TIMELINE_INJECTION_WEIGHT_DEFAULT,
+ [TIMELINE_INJECTION_PROGRESS]: TIMELINE_INJECTION_WEIGHT_DEFAULT,
[TIMELINE_INJECTION_PRO_UPGRADE]: TIMELINE_INJECTION_WEIGHT_DEFAULT,
[TIMELINE_INJECTION_PWA]: TIMELINE_INJECTION_WEIGHT_DEFAULT,
[TIMELINE_INJECTION_SHOP]: TIMELINE_INJECTION_WEIGHT_DEFAULT,