Added ProgressInjection

• Added:
- ProgressInjection for monthly funding progress

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 <div />
+    
+    const value = Math.min(parseFloat(monthlyExpensesComplete), 100)
+
+    return (
+      <TimelineInjectionLayout
+        title={intl.formatMessage(messages.operationsTitle)}
+        subtitle={intl.formatMessage(messages.operationsSubtitle)}
+        buttonHref={URL_DISSENTER_SHOP}
+        buttonTitle={intl.formatMessage(messages.donationTitle)}
+        id={injectionId}
+        isXS={isXS}
+      >
+        <div className={[_s.d, _s.pt5, _s.pb15, _s.w100PC].join(' ')}>
+          <ProgressBar
+            progress={monthlyExpensesComplete}
+            title={intl.formatMessage(messages.progressTitle, { value })}
+            href={URL_DISSENTER_SHOP}
+          />
+        </div>
+      </TimelineInjectionLayout>
+    )
+  }
+
+}
+
+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)

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

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'

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,